/**
 * React Fabric
 * @version 1.0.0
 * @license MIT
 * @copyright 2024 Adarsh Pastakia
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

@layer components {
  .fabric-chip {
    --blank-gradient: linear-gradient(to bottom, #00000005 0%, #0000 10%);
    --color: var(--color-tint);

    font-size: 0.875rem;
    outline: 1px solid color-mix(in oklab, var(--color) 25%, var(--fabric-bg));
    outline-offset: -1px;

    & > .fabric-chipLabel {
      line-height: 1.5;
    }

    & > .fabric-chipIcon {
      & + .fabric-chipLabel {
        margin-inline-start: -0.5em;
      }
    }

    & > .fabric-chipValue {
      background-color: --alpha(color-mix(in oklab, var(--color) 90%, var(--color-black)) / 75%);
    }
  }
}

@layer variants {
  .fabric-chip {
    height: unset;
    padding: unset;
    color: color-mix(in oklab, var(--color) 65%, var(--fabric-text));
    background-color: color-mix(in oklab, var(--color) 10%, var(--fabric-bg));

    > .fabric-chipValue {
      color: color-mix(in oklab, var(--color) 10%, var(--color-white));
    }

    &[data-clickable="true"] {
      &:hover {
        background-color: color-mix(in oklab, var(--color) 25%, var(--fabric-bg));
      }

      &:active,
      &[data-dropdown-open="true"] {
        background-color: color-mix(in oklab, var(--color) 20%, var(--fabric-bg));
        background-image: var(--active-gradient);
      }

      &[data-dropdown-open="true"] {
        pointer-events: none;
      }
    }

    &[data-variant="outlined"] {
      outline-color: color-mix(in oklab, var(--color) 70%, var(--fabric-bg));
      box-shadow: 0 0 2px color-mix(in oklab, var(--color) 50%, var(--color-tint)) inset;
    }

    &[data-variant="soft"] {
      background-color: color-mix(in oklab, var(--color) 15%, var(--fabric-bg));
      outline-color: color-mix(in oklab, var(--color) 20%, var(--fabric-bg));

      > .fabric-chipIcon,
      > .fabric-chipLabel {
        color: color-mix(in oklab, var(--color) 95%, var(--fabric-text));
      }

      &[data-clickable="true"] {
        &:hover {
          background-color: color-mix(in oklab, var(--color) 35%, var(--fabric-bg));
        }

        &:active,
        &[data-dropdown-open="true"] {
          background-color: color-mix(in oklab, var(--color) 30%, var(--fabric-bg));
        }
      }
    }

    &[data-variant="solid"] {
      background-color: color-mix(in oklab, var(--color) 50%, var(--fabric-bg));
      outline-color: color-mix(in oklab, var(--color) 75%, var(--fabric-bg));

      > .fabric-chipIcon,
      > .fabric-chipLabel {
        color: color-mix(in oklab, var(--color) 15%, var(--fabric-text));
      }

      &[data-clickable="true"] {
        &:hover {
          background-color: color-mix(in oklab, var(--color) 60%, var(--fabric-bg));
        }

        &:active,
        &[data-dropdown-open="true"] {
          background-color: color-mix(in oklab, var(--color) 40%, var(--fabric-bg));
        }
      }
    }
  }
}