.btn {
  &.btn-primary, &.btn-secondary, &.btn-tertiary { /*Selected effect when active*/

    &:active, &.active, &[active]  {
      box-shadow: inset -2px 4px 4px rgba(51, 51, 51, 0.25);
    }
  }

  &.btn-secondary { /*Removes 1px added from border*/
    padding: calc(0.25rem - 1px) calc(1rem - 1px);

    &.btn-sm {
      padding: calc(0.25rem - 1px) calc(0.5rem - 1px);
    }
  }

  &.btn-tertiary {
    min-width: fit-content;
    text-decoration: none;
  }

  &:disabled, &[disabled] { /*Buttons with disabled attribute*/
    cursor: not-allowed;
    opacity: 0.4;
  }

  &.btn-sm { /*Small Buttons*/
    line-height: 1rem;
    padding: 0.25rem 0.5rem;
  }

  &.btn-fit { /*Buttons with full width*/
    min-width: unset;
    width: fit-content;
  }

  &.btn-full { /*Buttons with full width*/
    max-width: unset;
    width: 100%;
  }

  &.btn-centered { /*Centered buttons - use for when not possible to use wrap-full e.g. within forms*/
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  &.btn-normal-text {
    text-transform: none;
  }

  &.btn-icon { /*Icon only Button*/
    justify-content: center;
    max-width: 2rem;
    min-height: 2rem;
    min-width: 2rem;
    padding: 0.5rem;

    &.btn-sm { /*Icon only small Button*/
      max-width: 1.5rem;
      min-height: 1.5rem;
      min-width: 1.5rem;
      padding: 0.25rem;
    }
  }

  &.btn-checkbox {
    input[type="checkbox"] {
      display: none;
    }

    &[active="true"], &:has(input[type="checkbox"]:checked) {
      background-color: var(--theme-color-darker);
      box-shadow: inset -2px 4px 4px rgba(51, 51, 51, 0.25);
      color: var(--pure-white);
    }
  }

  &.btn-radio {
    input[type="radio"] {
      display: none;
    }

    &:has(input[type="radio"]:checked) {
      background-color: var(--theme-color-darker);
      box-shadow: inset -2px 4px 4px rgba(51, 51, 51, 0.25);
      color: var(--pure-white);
    }
  }

  &.btn-tran-expand { /*Buttons that expand on hover (has an Icon)*/
    gap: 0;
    min-width: unset;
    transition: width .4s;

    span {
      max-width: 0;
      opacity: 0;
      transition: .4s;
      white-space: nowrap;
    }

    &:hover {
      gap: 0.5rem;

      span {
        max-width: 160px;
        opacity: 1;
      }
    }

    @media screen and (max-width: 768px) {
      &:hover span {
        display: none;
      }
    }
  }

  &.btn-tran-expand--l {
    &:hover span {
      max-width: 200px;
    }
  }

  &.btn-tran-device { /*Buttons that show only the icon on mobile*/
    i, svg {
      display: none;
    }

    span {
      display: inline;
    }

    @media screen and (max-width: 768px) {
      min-width: fit-content;

      i, svg {
        display: inline;
      }

      span {
        display: none;
      }
    }
  }
}