/* Button classic */
.btn  {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: inline-block;
    max-width: 100%;
    text-align: center;
    font-size: var(--font-size-normal);
    line-height: 1.5;
    text-decoration: none;
    font-weight: 600;
    padding: 16px 32px;
    color: var(--color-dark);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--color-dark);
    border-radius: 0;
    white-space: normal;
    transition: color 0.3s;
}
/* Button primary */
.btn-primary  {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: inline-block;
    max-width: 100%;
    text-align: center;
    font-size: var(--font-size-normal);
    line-height: 1.5;
    text-decoration: none;
    font-weight: 600;
    padding: 16px 32px;
    background: var(--color-white);
    color: var(--color-dark);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--color-dark);
    border-radius: 0;
    white-space: normal;
    transition: color 0.3s;
}
/* Button secondary */
.btn-secondary  {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: inline-block;
    max-width: 100%;
    text-align: center;
    font-size: var(--font-size-normal);
    line-height: 1.5;
    text-decoration: none;
    font-weight: 600;
    padding: 16px 32px;
    background: none;
    color: var(--color-white);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--color-brand);
    background-color: var(--color-brand);
    border-radius: 0;
    white-space: normal;
    transition: color 0.3s;
}
/* Button primary */
.btn-tertiary  {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: inline-block;
    max-width: 100%;
    text-align: center;
    font-size: var(--font-size-normal);
    line-height: 1.5;
    text-decoration: none;
    font-weight: 600;
    padding: 16px 32px;
    background: none;
    color: var(--color-text);
    border: 0;
    border-radius: 0;
    white-space: normal;
    transition: color 0.3s;
}

/* Buttons hover and focus */
.btn::before,
.btn-primary::before,
.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: var(--color-dark);
    transform: scaleY(0);
    will-change: transform;
    transform-origin: bottom;
    transition: transform 0.3s;
}
.delegate-hover:focus .btn ,
.delegate-hover:hover .btn ,
a.btn:focus,
a.btn:hover,
button.btn:focus,
button.btn:hover,
.delegate-hover:focus .btn-primary ,
.delegate-hover:hover .btn-primary ,
a.btn-primary:focus,
a.btn-primary:hover,
button.btn-primary:focus,
button.btn-primary:hover,
.delegate-hover:focus .btn-secondary ,
.delegate-hover:hover .btn-secondary ,
a.btn-secondary:focus,
a.btn-secondary:hover,
button.btn-secondary:focus,
button.btn-secondary:hover {
    text-decoration: none;
    color: var(--color-white);
}
.delegate-hover:focus-within .btn,
.delegate-hover:focus-within .btn-primary,
.delegate-hover:focus-within .btn-secondary {
    text-decoration: none;
    color: var(--color-white);
}
.delegate-hover:focus .btn::before,
.delegate-hover:hover .btn::before,
a.btn:focus::before,
a.btn:hover::before,
button.btn:focus::before,
button.btn:hover::before,
.delegate-hover:focus .btn-primary::before,
.delegate-hover:hover .btn-primary::before,
a.btn-primary:focus::before,
a.btn-primary:hover::before,
button.btn-primary:focus::before,
button.btn-primary:hover::before,
.delegate-hover:focus .btn-secondary::before,
.delegate-hover:hover .btn-secondary::before,
a.btn-secondary:focus::before,
a.btn-secondary:hover::before,
button.btn-secondary:focus::before,
button.btn-secondary:hover::before  {
    transform: none;
}
.delegate-hover:focus-within .btn::before,
.delegate-hover:focus-within .btn-primary::before,
.delegate-hover:focus-within .btn-secondary::before {
    transform: none;
}

.delegate-hover:focus .btn-tertiary ,
.delegate-hover:hover .btn-tertiary ,
a.btn-tertiary:focus,
a.btn-tertiary:hover,
button.tertiary:focus,
button.btn-tertiary:hover {
    color: var(--color-brand);
}
/* Icon button */
.btn-icon {
    vertical-align: top;
    width: 1em;
    height: 1.3em;
    margin-left: var(--margin-xsmall);
    fill: currentColor;
}
.btn-icon-right {
    vertical-align: top;
    width: 1em;
    height: 1.3em;
    margin-right: var(--margin-xsmall);
    fill: currentColor;
}

/* Button disabled */
.btn-primary:disabled,
.btn-secondary:disabled  {
    background-color: var(--color-grey-lightest);
    cursor: not-allowed;
    color: var(--color-grey-light);
    box-shadow: inset 0 0 0 1px var(--color-dark);
}

.btn-primary:disabled .btn-icon,
.btn-secondary:disabled .btn-icon  {
    fill: var(--color-grey-light);
}

.btn-primary:disabled:hover,
.btn-secondary:disabled:hover {
    color: var(--color-grey-light);
}

.btn-primary:disabled::before,
.btn-secondary:disabled::before {
    display: none;
}
.btn-tertiary:disabled {
    cursor: not-allowed;
    color: var(--color-grey-light);
}
.btn-tertiary:disabled:hover {
    color: var(--color-grey-light); 
}

.delegate-hover[aria-disabled="true"] .link-btn-text {
    color: var(--color-grey-light);
    will-change: transform;
    padding-right: calc(var(--margin-small) + 40px);
    transition: transform 0.3s;
}

.delegate-hover[aria-disabled="true"] .link-btn-icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: var(--color-grey-light);
}

.delegate-hover[aria-disabled="true"] .link-btn::before,
.delegate-hover[aria-disabled="true"] .link-btn::after {
    border-top: 1px solid var(--color-grey-light);
}
.delegate-hover[aria-disabled="true"]:focus .link-btn .link-btn-text,
.delegate-hover[aria-disabled="true"]:hover .link-btn .link-btn-text,
a.link-btn[aria-disabled="true"]:focus .link-btn-text,
a.link-btn[aria-disabled="true"]:hover .link-btn-text,
button.link-btn[aria-disabled="true"]:focus .link-btn-text,
button.link-btn[aria-disabled="true"]:hover .link-btn-text {
    transform: translateX(0px);
}
.delegate-hover[aria-disabled="true"]:focus-within .link-btn .link-btn-text {
    transform: translateX(0px);
}

/* Button contextual */
.link-btn {
    --link-btn-color: var(--color-text);
    --link-btn-hover-color: var(--color-brand);
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: var(--font-size-xsmall);
    font-weight: 600;
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 16px;
}
.link-btn::before,
.link-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    border-top: 1px solid var(--link-btn-color);
}
.link-btn::before {
    left: 0;
    width: 100px;
}
.link-btn::after {
    left: 100px;
    width: calc(100% - 100px);
    will-change: transform;
    transition: transform 0.3s;
    transform-origin: left;
}
.link-btn-text {
    color: var(--link-btn-color);
    will-change: transform;
    padding-right: calc(var(--margin-small) + 40px);
    transition: transform 0.3s;
}
.link-btn-icon {
    position: relative;
    margin-left: auto;
    width: 20px;
    height: 20px;
    color: var(--link-btn-color);
    will-change: transform;
    transition: 0.3s;
    transition-property: color, transform;
}
.link-btn-icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: currentColor;
}
.delegate-hover:focus .link-btn,
.delegate-hover:hover .link-btn,
a.link-btn:focus,
a.link-btn:hover,
button.link-btn:focus,
button.link-btn:hover {
    text-decoration: none;
}
.delegate-hover:focus-within .link-btn {
    text-decoration: none;
}

.delegate-hover:focus .link-btn .link-btn-text,
.delegate-hover:hover .link-btn .link-btn-text,
a.link-btn:focus .link-btn-text,
a.link-btn:hover .link-btn-text,
button.link-btn:focus .link-btn-text,
button.link-btn:hover .link-btn-text {
    transform: translateX(20px);
}
.delegate-hover:focus-within .link-btn .link-btn-text {
    transform: translateX(20px);
}
.delegate-hover:focus .link-btn .link-btn-icon,
.delegate-hover:hover .link-btn .link-btn-icon,
a.link-btn:focus .link-btn-icon,
a.link-btn:hover .link-btn-icon,
button.link-btn:focus .link-btn-icon,
button.link-btn:hover .link-btn-icon {
    color: var(--link-btn-hover-color);
    transform: translateX(-20px);
}

.delegate-hover:focus-within .link-btn .link-btn-icon {
    color: var(--link-btn-hover-color);
}
.delegate-hover, .delegate-hover:focus, .delegate-hover:hover {
    color: inherit;
    text-decoration: none;
}
.btn.btn-primary:hover {
    background: none;
    border: none;
}
.btn.btn-secondary:hover {
    background: var(--color-brand);
}
/* Link */
a {
    color: inherit;
    text-decoration: underline;
    transition: color 0.3s;
}
a:focus,
a:hover {
    color: var(--color-brand);
    text-decoration: underline;
}

/* Button collapse */
.toc {
    position: relative;
    flex-grow: 1;
}
.toc-toggler {
    position: relative;
    display: block;
    background: var(--color-brown-lightest);
    border: 0;
    margin: 0;
    padding: 16px calc(32px * 2 + 8px) 16px 32px;
}
.toc-toggler:focus {
    outline: 1px dotted;
}
.toc-toggler svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 32px;
    width: 8px;
    height: 8px;
}
.toc-toggler:not(.collapsed) svg {
    transform: translateY(-50%) scaleY(-1);
}
.toc-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%; 
    width: max-content;
    max-width: 100%;
    background: var(--color-white);
    box-shadow: 0 8px 20px rgba(118, 118, 118, 0.1);
    z-index: 1;
}
.toc-list > ul > li {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 32px;
}
.toc-list a {
    display: block;
    padding: 24px 0;
    text-decoration: none;
}
.toc-list a:focus,
.toc-list a:hover {
    color: inherit;
    text-decoration: underline;
}
.toc-list li:not(:first-child) a {
    border-top: 1px solid var(--color-border);
}

/* Mode dark */
.dark .btn-primary {
    color: var(--color-white);
    background: var(--color-dark);
    box-shadow: inset 0 0 0 1px var(--color-white);
}

.dark .btn-primary::before {background: var(--color-white);}

.dark .delegate-hover:focus .btn-primary ,
.dark .delegate-hover:hover .btn-primary ,
.dark a.btn-primary:focus,
.dark a.btn-primary:hover,
.dark button.btn-primary:focus,
.dark button.btn-primary:hover {
    text-decoration: none;
    color: var(--color-dark);
}
.dark .delegate-hover:focus-within .btn-primary  {
    text-decoration: none;
    color: var(--color-dark);
}
.dark .delegate-hover:focus .link-btn .link-btn-text,
.dark .delegate-hover:hover .link-btn .link-btn-text,
.dark a.link-btn:focus .link-btn-text,
.dark a.link-btn:hover .link-btn-text,
.dark button.link-btn:focus .link-btn-text,
.dark button.link-btn:hover .link-btn-text {
    transform: translateX(20px);
    text-decoration: underline;
}
.dark .delegate-hover:focus .link-btn .link-btn-icon,
.dark .delegate-hover:hover .link-btn .link-btn-icon,
.dark a.link-btn:focus .link-btn-icon,
.dark a.link-btn:hover .link-btn-icon,
.dark button.link-btn:focus .link-btn-icon,
.dark button.link-btn:hover .link-btn-icon {
    color: var(--color-text);
}
.dark .btn-secondary {
    color: var(--color-white);
    border: 1px solid var(--color-field-border);
    box-shadow: inset 0 0 0 1px var(--color-grey-dark);
    background-color: var(--color-grey-dark); 
}
.dark .delegate-hover:focus .btn-tertiary ,
.dark .delegate-hover:hover .btn-tertiary ,
.dark a.btn-tertiary:focus,
.dark a.btn-tertiary:hover,
.dark button.tertiary:focus,
.dark button.btn-tertiary:hover {
    color: var(--color-white);
    text-decoration: underline;
}

button.btn-simple-link {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    text-decoration: underline;
}