ul.radchecks {

    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--padding);
    padding: 0;
    margin: 0;
    list-style: none;

    &.v,
    #sidebar & {

        flex-direction: column;

        & > li {
            width: 100%;
        }
    }

    #sidePanel & {

        & > li {
            flex: 0 0 auto;
            width: 100%;
        }

        & > li > a {
            box-sizing: border-box;
            width: 100%;
            padding: 0;
            position: relative;

            transition: background 300ms ease, color 300ms ease;
        }

        & .icon-text-badge {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0;
            white-space: nowrap;
        }

        & .icon {
            width: var(--input-size);
            flex: 0 0 var(--input-size);
            text-align: center;
            font-size: var(--font-size);
        }

        & .text {
            display: none;
            white-space: nowrap;
        }

        & .badge {
            position: absolute;
            top: -10px;
            right: -8px;
            height: 10px;
            padding: 11px 6px;
            border: 1px solid var(--header-bg);
            background-color: var(--error);
            color: var(--header-bg);
        }
    }

    body.sidepanel-expanded #sidePanel & {

        & .text { display: inline-block; }

        & > li > a { padding-right: var(--padding); }

        & .badge {
            position: relative;
            top: unset;
            right: unset;
            margin-right: 20px;
            display: inline-block;
        }
    }

    #secondary-nav & li a  {
        justify-content: center;
    }

    & > li {
        height: var(--input-size);
        background: transparent;
        box-shadow: none;
        margin: 0px;
        flex: 1;
    }

    & > li > a,
    & > li > label {

        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--input-size);
        padding: 0 var(--gap);
        color: var(--text);
        background: var(--btn);
        border-radius: var(--border-radius);
        text-decoration: none;
        cursor: pointer;
        transition: var(--transition);

        & .check::before,
        & .check::after { background: var(--text); }

        &:hover {
            color: var(--text);
            background: var(--btn-hover);
            & * { color: var(--text); }
        }

        &.active,
        &:active {
            color: var(--white);
            background: var(--btn-active);
            transform: scale(0.99) translateY(2px);
            & * { color: var(--white); }

            & .check::before,
            & .check::after { background: var(--white); }
        }
    }

    & > li > input:checked + label,
    & > li > input:checked + label:hover {

        color: var(--white);
        background: var(--btn-active);

        & * { color: var(--white) !important; }

        & .check::before,
        & .check::after { background: var(--white); }
    }

    &.btn-group {

        gap: 0;
        width: fit-content;
        border-radius: var(--border-radius);
        background: var(--btn);
        overflow: hidden;

        & .text {
            display: none;
            visibility: hidden;
        }

        & > li,
        & > li > a,
        & > li > label {
            width: var(--input-size);
            min-width: var(--input-size);
            max-width: var(--input-size);
            padding: 0;
            border-radius: 0;
            justify-content: center;
            box-shadow: none;

            & * {
                padding: 0;
                margin: 0;
            }

            & span {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }

    & > li > input[type="radio"],
    & > li > input[type="checkbox"] { display: none; }

    & .container {
        display: inline-block;
        width: auto;
        padding: 0;
        margin: 0 10px -2px 0;
    }

    & .check {

        position: relative;
        width: 1.3em;
        height: 1.3em;
        font-size: 16px;
        flex-shrink: 0;

        &::before,
        &::after {
            content: '';
            position: absolute;
            top: .6em;
            left: .25em;
            width: 1.2em;
            height: 2px;
            border-radius: 3px;
            transition: transform 200ms ease-in-out,
                        width 200ms ease-in-out,
                        left 200ms ease-in-out,
                        top 200ms ease-in-out,
                        background-color 200ms ease-in-out;
        }

        &::before { transform: rotate(-45deg); }
        &::after  { transform: rotate(45deg); }
    }

    & > li > input:checked + label .check {

        &::before {
            width: .7em;
            top: .85em;
            left: 0;
            transform: rotate(45deg);
        }

        &::after {
            width: 1.2em;
            top: .6em;
            left: .25em;
            transform: rotate(-55deg);
        }
    }
}

.icon-text-badge {

    display: flex;
    align-items: center;

    & .icon {

        &:empty { display: none !important; }

    }

    & .text {

        &:empty { display: none !important; }

    }

    & .badge {

        &:empty { display: none !important; }

    }
}

button:hover,
:where(a[role="button"]):hover,
.btn:hover {
    color: var(--brand);
    background: var(--btn-hover);
    border-color: var(--btn-hover);
}

a.nav-link,
button,
:where(a[role="button"]) {
  height: var(--input-size);
  width: 100%; 
  min-width: var(--input-size);
  /*max-width: var(--input-size);*/
  padding: 15px;
  margin: 0;
  font-size: var(--font-size);
  font-weight: bold;
  color: var(--text);
  background: var(--btn);
  border: 0; outline: 0;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-none);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--transition);
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  position: relative;

}



button:has(span),
:where(a[role="button"]):has(span) {
  padding: 0;
}
button:has(span) span,
:where(a[role="button"]):has(span) span {

  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

a span,
button span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.square {
    width: var(--input-size);
    min-width: var(--input-size);
    max-width: var(--input-size);
    height: var(--input-size);
    min-height: var(--input-size);
    max-height: var(--input-size);
    background: var(--btn);
    border-radius: var(--border-radius);
    & * { color: var(--text); }
}

.square,
label.square,
li.nav-item.square,
a.nav-link.square,
a.nav-link.hamburger,
a.hamburger,
button.square {
  width: var(--input-size);
  min-width: var(--input-size);
  max-width: var(--input-size);
}

a.nav-link .badge,
.media-nav a.nav-link .badge,
button .badge {

  color: var(--text);
  background: var(--white);

}

.hamburger {
    padding: 15px 15px;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    border: 0;
    margin: 0;
    overflow: visible;
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: center;

    & .hamburger-box {

        border-radius: var(--radius);

        display: flex;
        justify-content: center;
        align-items: center;
        transition: var(--transition);

        * { color: var(--text); }

        & .hamburger-inner,
        & .hamburger-inner::before,
        & .hamburger-inner::after {
            width: calc( var(--input-size) / 2 );
            min-width: calc( var(--input-size) / 2 );
            height: 1px;
            background-color: var(--brand);

            position: relative;
            transition-property: transform;
            transition-duration: 150ms;
            transition-timing-function: ease;
        }

        & .hamburger-inner {

            transform: rotate(45deg);
            transition-delay: 0.12s;
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

            &::before {
                top: 0;
                opacity: 0;
                transition: top 0.075s ease, opacity 0.075s 0.12s ease;
            }

            &::after {
                bottom: 0px !important;
                transform: rotate(-90deg);
                transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
            }

        }

        & .hamburger-inner {

            transition-duration: 0.075s;
            transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

            &::before,
            &::after {

                content: ""; display: block;

            }

            &::before {
                top: -8px;
                right: -12px;
                transition: top 0.075s 0.12s ease, opacity 0.075s ease;
            }

            &::after {
                left: -12px;
                bottom: -8px;
                transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
            }
        }
    }
}