@use "../ui/vars" as *;

$browsers: "chrome", "edge", "firefox", "safari";

.baseline-indicator {
  --baseline-bg: var(--baseline-limited-bg);
  --baseline-engine-bg: var(--baseline-limited-engine-bg);
  --baseline-img: var(--baseline-limited-img);
  --baseline-check: var(--baseline-limited-check);
  --baseline-cross: var(--baseline-limited-cross);
  --feedback-link-icon: var(--icon-primary);

  background: var(--baseline-bg);
  border-radius: 0.25rem;
  margin: 1rem 0;
  padding-left: 3.8125rem;

  &.high {
    --baseline-bg: var(--baseline-high-bg);
    --baseline-engine-bg: var(--baseline-high-engine-bg);
    --baseline-img: var(--baseline-high-img);
    --baseline-check: var(--baseline-high-check);
  }

  &.low {
    --baseline-bg: var(--baseline-low-bg);
    --baseline-engine-bg: var(--baseline-low-engine-bg);
    --baseline-img: var(--baseline-low-img);
    --baseline-check: var(--baseline-low-check);
    --baseline-pill-bg: var(--baseline-low-pill-bg);
    --baseline-pill-color: var(--baseline-low-pill-color);
  }

  &[open] {
    summary .icon-chevron {
      transform: rotate(180deg);
    }
  }

  summary {
    --chevron-size: 0.6875rem;
    --chevron-padding-left: 0.75rem;
    --chevron-padding-right: 1.25rem;

    align-items: center;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 1rem 0;
    padding-right: calc(
      var(--chevron-padding-left) + var(--chevron-size) +
        var(--chevron-padding-right)
    );
    position: relative;

    &::-webkit-details-marker {
      // Remove arrow from older versions of Safari.
      display: none;
    }

    .indicator {
      --width: 2.3125rem;

      background-image: var(--baseline-img);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      display: block;
      height: 2.25rem;
      left: calc(-0.5rem - var(--width));
      position: absolute;
      top: 1rem;
      width: var(--width);
    }

    .status-title {
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0;
      line-height: 1.5;
      margin: 0;
      padding: 0.375rem 0;

      .not-bold {
        font-weight: normal;
      }
    }

    .pill {
      background: var(--baseline-pill-bg);
      border-radius: 0.125rem;
      color: var(--baseline-pill-color);
      font-size: 0.75rem;
      font-weight: 600;
      margin-right: auto;
      padding: 0 0.25rem;
      text-transform: uppercase;
    }

    .browsers {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;

      .engine {
        background: var(--baseline-engine-bg);
        border-radius: 2rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem 0.625rem;

        .browser {
          display: flex;

          &::before {
            background-repeat: no-repeat;
            background-size: contain;
            content: "";
            display: block;
            height: 1.25rem;
            width: 1.25rem;
          }

          @each $name in $browsers {
            &.#{$name}::before {
              background-image: url("../assets/icons/baseline/" + $name + ".svg");
            }
          }

          &::after {
            background-color: var(--baseline-cross);
            content: "";
            display: block;
            height: 1.25rem;
            mask-image: url("../assets/icons/baseline/browser-cross.svg");
            mask-repeat: no-repeat;
            mask-size: contain;
            width: 1rem;
          }

          &.supported::after {
            background-color: var(--baseline-check);
            mask-image: url("../assets/icons/baseline/browser-check.svg");
          }
        }
      }
    }

    .icon-chevron {
      --icon-size: var(--chevron-size);
      --icon-primary: var(--text-primary);
      position: absolute;
      right: var(--chevron-padding-right);
    }
  }

  .extra {
    padding-bottom: 1.5rem;
    padding-right: 1rem;

    p {
      margin-bottom: 1rem;
      margin-top: 0;
    }

    ul {
      column-gap: 1.5rem;
      display: flex;
      flex-wrap: wrap;
      margin: 0;
      padding: 0;
      row-gap: 1rem;

      li {
        font-weight: 500;
        list-style: none;
        margin: 0;

        a.learn-more {
          &,
          &:active,
          &:visited {
            background: none;
            color: var(--text-link);
          }
        }

        a:not(.learn-more) {
          &,
          &:active,
          &:visited {
            background: none;
            color: var(--text-primary);
          }
        }
      }
    }
  }
}