/*!************************
*****     button     *****
*************************/
@layer component {
  /*[data-component-id="kk:button"] {  }*/

  @scope ([data-component-id$=":button"], .btn) {
    :scope {
      --_speed: var(--speed-300);
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      display: inline-block;
      min-width: -moz-fit-content;
      min-width: fit-content;
      border-radius: var(--radius-md);
      background-image: none;
      font-size: var(--fs);
      font-weight: var(--fw-bold);
      -webkit-text-decoration: none;
      text-decoration: none;
      text-align: center;
      cursor: pointer;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
      /*width: 100%;*/
      /*max-width: 400px;*/
    }

      [disabled]:scope {
        cursor: not-allowed;
      }
      /*transition: var(--_speed) !important;*/
      /*box-shadow: var(--shadow-xxl) var(--clr-bg-900);*/

      /*&:hover {
        box-shadow: 0px 0px 0px 0px transparent;
        transition: var(--_speed);
      }*/
    /*
    &.uppercase {
      text-transform: uppercase;
      font-variant: small-caps;
    }*/

    &.btn--sm {
      padding: var(--sp-2) var(--sp-6);
    }

    &.btn--md {
      padding: var(--sp-4) var(--sp-8);
    }

    &.btn--lg {
      padding: var(--sp-6) var(--sp-16);
      font-size: 1.5em;
    }

    &.primary {
      --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--clr-light-500);
      color: var(--csstools-light-dark-toggle--0, var(--clr-light-500));
      background-color: var(--clr-primary-500);
      /*outline: 2px solid var(--clr-primary-500);*/
      /*outline-offset: 0;*/
      /*border: solid var(--clr-light-500) 2px;*/
      transition: background-color var(--_speed);
    }

@supports (color: light-dark(red, red)) {
&.primary {
      color: light-dark(var(--clr-light-500), var(--clr-light-500));
    }
}

      &.primary:hover {
        transition: background-color var(--_speed);
        background-color: var(--clr-primary-600);
        color: var(--clr-light-100);
      }

    /*&.primary--hollow {
      color: light-dark(var(--clr-primary-500), var(--clr-primary-500));
      background-color: transparent;
      outline: 2px solid var(--clr-primary-500);
      outline-offset: 0;
      border: solid var(--clr-primary-500) 2px;

      &:hover {
        outline-color: var(--clr-primary-500);
        border-color: var(--clr-light-500);
        background-color: var(--clr-primary-500);
        color: light-dark(var(--clr-light-500), var(--clr-light-500));
        transition:
          outline-color var(--_speed),
          border-color var(--_speed),
          background-color var(--_speed),
          color var(--_speed);
      }
    }*/

    &.secondary {
      --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) var(--clr-light-500);
      color: var(--csstools-light-dark-toggle--1, var(--clr-light-500));
      background-color: var(--clr-secondary-500);
      /*outline: 2px solid var(--clr-secondary-500);*/
      /*outline-offset: 0;*/
      /*border: solid var(--clr-light-500) 2px;*/
      transition: background-color var(--_speed);
    }

@supports (color: light-dark(red, red)) {
&.secondary {
      color: light-dark(var(--clr-light-500), var(--clr-light-500));
    }
}

      &.secondary:hover {
        transition: background-color var(--_speed);
        background-color: var(--clr-secondary-700);
        color: var(--clr-light-100);
      }

    /*&.secondary--hollow {
      color: light-dark(var(--clr-secondary-500), var(--clr-secondary-500));
      background-color: transparent;
      outline: 2px solid var(--clr-secondary-500);
      outline-offset: 0;
      border: solid var(--clr-secondary-500) 2px;

      &:hover {
        outline-color: var(--clr-secondary-500);
        border-color: var(--clr-light-500);
        background-color: var(--clr-secondary-500);
        color: light-dark(var(--clr-light-500), var(--clr-light-500));
        transition:
          outline-color var(--_speed),
          border-color var(--_speed),
          background-color var(--_speed),
          color var(--_speed);
      }
    }*/

    &.gray {
      --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) var(--clr-dark-500);
      color: var(--csstools-light-dark-toggle--2, var(--clr-dark-500));
      background-color: var(--clr-gray-900);
      /*outline: 2px solid var(--clr-secondary-500);*/
      /*outline-offset: 0;*/
      /*border: solid var(--clr-light-500) 2px;*/
      transition: background-color var(--_speed);
    }

@supports (color: light-dark(red, red)) {
&.gray {
      color: light-dark(var(--clr-dark-500), var(--clr-dark-500));
    }
}

      &.gray:hover {
        transition: background-color var(--_speed);
        background-color: var(--clr-gray-700);
        color: var(--clr-dark-100);
      }

    &.bg {
      --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) var(--clr-fg-500);
      color: var(--csstools-light-dark-toggle--3, var(--clr-fg-500));
      background-color: var(--clr-bg-500);
      /*outline: 2px solid var(--clr-secondary-500);*/
      /*outline-offset: 0;*/
      /*border: solid var(--clr-light-500) 2px;*/
      transition: background-color var(--_speed);
    }

@supports (color: light-dark(red, red)) {
&.bg {
      color: light-dark(var(--clr-fg-500), var(--clr-fg-500));
    }
}

      &.bg:hover {
        transition: background-color var(--_speed);
        background-color: var(--clr-bg-700);
        color: var(--clr-light-100);
      }

    &.fg {
      --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) var(--clr-bg-500);
      color: var(--csstools-light-dark-toggle--4, var(--clr-bg-500));
      background-color: var(--clr-fg-500);
      /*outline: 2px solid var(--clr-secondary-500);*/
      /*outline-offset: 0;*/
      /*border: solid var(--clr-light-500) 2px;*/
      transition: background-color var(--_speed);
    }

@supports (color: light-dark(red, red)) {
&.fg {
      color: light-dark(var(--clr-bg-500), var(--clr-bg-500));
    }
}

      &.fg:hover {
        transition: background-color var(--_speed);
        background-color: var(--clr-fg-100);
        color: var(--clr-light-100);
      }
  }
}