.enquiry-button {
  /* Button */
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  box-sizing: border-box;
  width: max-content;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 12px;
  border-width: 0;
  border-radius: 6px;
  transition: all 0.25s ease-in-out;
  letter-spacing: 0.2px;
  cursor: pointer;
  user-select: none;
  appearance: none;
  gap: 4px;

  &:disabled {
    cursor: not-allowed;
  }

  .material-symbols-outlined {
    font-size: 20px;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 20px;
    min-height: 20px;
    max-height: 20px;
  }

  .enquiry-button__text {
    white-space: nowrap;
    overflow: hidden;
  }

  &.xsmall {
    font-size: 12px;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    padding: 0 6px;
  }

  &.small {
    font-size: 12px;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 0 10px;
    gap: 2px;
  }

  &.large {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0 20px;
    gap: 6px;

    .material-symbols-outlined {
      font-size: 20px;
      width: 20px;
      min-width: 20px;
      max-width: 20px;
      height: 20px;
      min-height: 20px;
      max-height: 20px;
    }
  }

  &.xsmall, &.small {
    .material-symbols-outlined {
      font-size: 16px;
      width: 16px;
      min-width: 16px;
      max-width: 16px;
      height: 16px;
      min-height: 16px;
      max-height: 16px;
    }
  }

  &.icon-dropdown {
    align-items: center;
    justify-content: center;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0;

    &.xsmall {
      height: 24px;
      min-height: 24px;
      max-height: 24px;
    }

    &.small {
      height: 28px;
      min-height: 28px;
      max-height: 28px;
    }

    &.large {
      height: 40px;
      min-height: 40px;
      max-height: 40px;
    }

    &.opened [data-closed] {
      display: none;
    }

    &:not(.opened) [data-opened] {
      display: none;
    }

    .material-symbols-outlined, .icon {
      pointer-events: none;
    }
  }

  &.icon {
    /* Icon */
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0;

    &.xsmall {
      width: 24px;
      min-width: 24px;
      max-width: 24px;
      height: 24px;
      min-height: 24px;
      max-height: 24px;
      padding: 0;
    }

    &.small {
      width: 28px;
      min-width: 28px;
      max-width: 28px;
      height: 28px;
      min-height: 28px;
      max-height: 28px;
      padding: 0;
    }

    &.large {
      width: 40px;
      min-width: 40px;
      max-width: 40px;
      height: 40px;
      min-height: 40px;
      max-height: 40px;
      padding: 0;

      .material-symbols-outlined {
        font-size: 24px;
        min-width: 24px;
        max-width: 24px;
        height: 24px;
        min-height: 24px;
        max-height: 24px;
      }
    }

    &.more-actions .material-symbols-outlined {
      pointer-events: none;
    }
  }

  &.icon-left {
    /* With icon left */
    padding-left: 6px;

    &.xsmall {
      padding-left: 4px;
    }

    &.large {
      padding-left: 14px;
    }
  }

  &.icon-right {
    /* With icon right */
    padding-right: 6px;

    &.xsmall {
      padding-right: 4px;
    }

    &.large {
      padding-right: 14px;
    }
  }

  &.filter {
    /* Filter */
    position: relative;
    border: 1px solid var(--color-brand-blue-75);
    background-color: var(--color-brand-blue-75);

    .material-symbols-outlined:not([class*='enquiry-color-']) {
      color: var(--color-brand-blue-600);
    }

    &:hover {
      border-color: var(--color-brand-blue-200);
      background-color: var(--color-brand-blue-200);
    }

    &.opened {
      border-color: var(--color-brand-blue-400);
    }

    &:disabled {
      background-color: var(--color-gray-50);
      cursor: not-allowed;

      .material-symbols-outlined {
        color: var(--color-gray-300);
      }
    }

    &.filter-active {
      border-color: var(--color-brand-blue-400);

      &::after {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 10px;
        height: 10px;
        border: 2px solid var(--color-white);
        border-radius: 50%;
        background-color: var(--color-red-700);
        content: '';
      }
    }
  }

  &.primary {
    /* Primary */
    background-color: var(--color-brand-blue-600);
    color: var(--color-white);

    &:hover {
      background-color: var(--color-brand-blue-700);
    }

    &:focus, &:active, &.active {
      background-color: var(--color-brand-blue-800);
    }

    &:disabled {
      background-color: var(--color-gray-50);
      color: var(--color-gray-300);

      &.material-symbols-outlined {
        color: var(--color-gray-300);
      }
    }
  }

  &.gray {
    /* Gray */
    background-color: var(--color-gray-75);
    color: var(--color-gray-700);

    &:hover {
      background-color: var(--color-gray-300);
    }

    &:focus, &:active {
      background-color: var(--color-gray-500);
    }

    &:disabled {
      background-color: var(--color-gray-50);
      color: var(--color-gray-300);
    }
  }

  &.outlined {
    /* Outlined */
    border: 1px solid var(--color-gray-300);
    background-color: var(--color-white);
    color: var(--color-gray-700);

    .material-symbols-outlined:not([class*='enquiry-color-']) {
      color: var(--color-gray-500);
    }

    &:hover {
      border-color: var(--color-gray-400);
      background-color: var(--color-gray-50);
    }

    &:focus, &:active {
      border-color: var(--color-gray-400);
      background-color: var(--color-gray-75);
    }

    &:disabled {
      border-color: var(--color-gray-200);
      background-color: var(--color-gray-50);
      color: var(--color-gray-300);

      .material-symbols-outlined {
        color: var(--color-gray-300);
      }
    }
  }

  &.outlined-inverse {
    /* Outlined-Inverse */
    border: 1px solid var(--color-gray-700);
    background-color: var(--color-gray-900);
    color: var(--color-white);

    &:hover {
      border-color: var(--color-gray-600);
      background-color: var(--color-gray-800);
    }

    &:focus, &:active {
      border-color: var(--color-gray-600);
      background-color: var(--color-gray-700);
    }

    &:disabled {
      border-color: var(--color-gray-700);
      background-color: var(--color-gray-900);
      color: var(--color-gray-600);

      .material-symbols-outlined {
        color: var(--color-gray-600);
      }
    }
  }

  &.tonal-neutral {
    /* Tonal-Neutral */
    background-color: var(--color-brand-blue-75);
    color: var(--color-brand-blue-700);

    &:hover {
      background-color: var(--color-brand-blue-200);
    }

    &:focus, &:active {
      background-color: var(--color-brand-blue-300);
    }

    &:disabled {
      background-color: var(--color-gray-50);
      color: var(--color-gray-300);

      .material-symbols-outlined {
        color: var(--color-gray-300);
      }
    }
  }

  &.tonal-neutral-red {
    /* Tonal-Neutral-Red */
    background-color: var(--color-red-50);
    color: var(--color-red-700);

    .material-symbols-outlined:not([class*='enquiry-color-']) {
      color: var(--color-red-700);
    }

    &:hover {
      background-color: var(--color-red-200);
    }

    &:focus, &:active {
      background-color: var(--color-red-300);
    }

    &:disabled {
      background-color: var(--color-red-50);
      color: var(--color-gray-300);

      .material-symbols-outlined {
        color: var(--color-gray-300);
      }
    }
  }

  &.tonal-negative {
    /* Tonal-Negative */
    background-color: var(--color-red-50);
    color: var(--color-red-700);

    &:hover {
      background-color: var(--color-red-100);
    }

    &:focus, &:active {
      background-color: var(--color-red-200);
    }

    &:disabled {
      background-color: var(--color-gray-50);
      color: var(--color-gray-300);

      .material-symbols-outlined {
        color: var(--color-gray-300);
      }
    }
  }

  &.text-primary {
    /* Text-Primary */
    background-color: transparent;
    color: var(--color-brand-blue-600);

    &:hover {
      background-color: var(--color-brand-blue-200);
    }

    &:focus, &:active {
      background-color: var(--color-brand-blue-300);
    }

    &:disabled {
      background-color: transparent;
      color: var(--color-gray-300);

      .material-symbols-outlined {
        color: var(--color-gray-300);
      }
    }
  }

  &.text-achromatic {
    /* Text-Achromatic */
    background-color: transparent;
    color: var(--color-gray-700);

    .material-symbols-outlined:not([class*='enquiry-color-']) {
      color: var(--color-gray-500);
    }

    &:hover {
      background-color: var(--color-gray-50);
    }

    &:focus, &:active {
      background-color: var(--color-gray-75);
    }

    &:disabled {
      background-color: transparent;
      color: var(--color-gray-300);

      .material-symbols-outlined {
        color: var(--color-gray-300);
      }
    }
  }

  &.text-inverse {
    /* Text-Inverse */
    background-color: var(--color-gray-900);
    color: var(--color-white);

    &:hover {
      background-color: var(--color-gray-800);
    }

    &:focus, &:active {
      background-color: var(--color-gray-700);
    }

    &:disabled {
      background-color: var(--color-gray-900);
      color: var(--color-gray-600);

      .material-symbols-outlined {
        color: var(--color-gray-600);
      }
    }
  }

  &.transparent {
    /* Transparent */
    background-color: transparent;
    color: var(--color-gray-600);

    &:hover {
      background-color: transparent;
      color: var(--color-gray-800);
    }

    &:focus, &:active {
      background-color: transparent;
      color: var(--color-gray-500);
    }

    &:disabled {
      background-color: transparent;
      color: var(--color-gray-300);

      .material-symbols-outlined {
        color: var(--color-gray-300);
      }
    }
  }

  &.on-mobile-only-icon {
    @media screen and (max-width: 601px) {
      /* Icon */
      align-items: center;
      justify-content: center;
      width: 32px;
      min-width: 32px;
      max-width: 32px;
      height: 32px;
      min-height: 32px;
      max-height: 32px;
      padding: 0;

      .enquiry-button__text {
        display: none;
      }

      &.xsmall {
        width: 24px;
        min-width: 24px;
        max-width: 24px;
        height: 24px;
        min-height: 24px;
        max-height: 24px;
        padding: 0;
      }

      &.small {
        width: 28px;
        min-width: 28px;
        max-width: 28px;
        height: 28px;
        min-height: 28px;
        max-height: 28px;
        padding: 0;
      }

      &.large {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        padding: 0;

        .material-symbols-outlined {
          font-size: 24px;
          min-width: 24px;
          max-width: 24px;
          height: 24px;
          min-height: 24px;
          max-height: 24px;
        }
      }

      &.more-actions .material-symbols-outlined {
        pointer-events: none;
      }
    }
  }

  &.big-with-image {
    /* Big with Image */
    padding: 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: 6px;
    background-color: var(--color-white);
    height: 80px;
    min-height: 80px;
    max-height: 80px;

    .enquiry-button__text {
      margin-left: 16px;
    }

    &:hover {
      border-color: var(--color-gray-400);
      background-color: var(--color-gray-50);
    }

    &:focus, &:active {
      border-color: var(--color-gray-400);
      background-color: var(--color-gray-75);
    }

    &:disabled {
      border-color: var(--color-gray-200);
      background-color: var(--color-gray-50);
      color: var(--color-gray-300);

      & img {
        filter: grayscale(100%);
      }
    }
  }

  &.dropdown {
    /* Text-Dropdown */

    & *:last-child {
      margin-left: 11px;
    }

    &.icon {
      & *:last-child {
        margin-left: -6px;
      }
    }

    &.opened {
      & *:last-child {
        transform: rotate(180deg);
      }
    }
  }

  /* todo Tonal-Neutral-Green */
  /* todo Primary-Dropdown */
  /* todo Tonal-Dropdown */
}

/* SHOW MORE MODIFIER */
.enquiry-button__show-more {
  .enquiry-button__text {
    &[data-opened] {
      display: none;
    }

    &[data-closed] {
      display: block;
    }
  }

  .material-symbols-outlined {
    &[data-opened] {
      display: none;
    }

    &[data-closed] {
      display: block;
    }
  }

  &.opened {
    .enquiry-button__text {
      &[data-opened] {
        display: block;
      }

      &[data-closed] {
        display: none;
      }
    }

    .material-symbols-outlined {
      &[data-opened] {
        display: block;
      }

      &[data-closed] {
        display: none;
      }
    }
  }
}

/* DROP DOWN MODIFIER */
.enquiry-button__dropdown {
  .material-symbols-outlined {
    &[data-opened] {
      display: none;
    }

    &[data-closed] {
      display: block;
    }
  }

  &.opened .material-symbols-outlined {
    &[data-opened] {
      display: block;
    }

    &[data-closed] {
      display: none;
    }
  }
}

/* SEGMENT BUTTON */
.enquiry-segment-button {
  position: relative;
  display: flex;
  align-items: center;

  .enquiry-button {
    z-index: 1;

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:not(:last-child) {
      margin-right: -1px;
    }

    &:not(:last-child):not(:first-child) {
      margin-right: -1px;
      border-radius: 0;
    }

    &:hover, &:active, &:focus, &.active {
      z-index: 2;
    }

    &.active {
      border-color: var(--color-brand-blue-400);
      background-color: var(--color-brand-blue-100);
      color: var(--color-brand-blue-600);
    }
  }
}

/* DEPRECATED */
.enquiry-dropdown-with-button {
  display: flex;
  align-items: center;
}

.enquiry-dropdown-with-button .enquiry-button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.enquiry-dropdown-with-button .enquiry-button:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.enquiry-dropdown-with-button .enquiry-button.icon {
  border-left: 1px solid var(--color-brand-blue-200);
}

.enquiry-dropdown-with-button .enquiry-button.icon .material-symbols-outlined:not(.opened) {
  display: block;
}

.enquiry-dropdown-with-button .enquiry-button.icon.opened .material-symbols-outlined:not(.opened) {
  display: none;
}

.enquiry-dropdown-with-button .enquiry-button.icon .material-symbols-outlined.opened {
  display: none;
}

.enquiry-dropdown-with-button .enquiry-button.icon.opened .material-symbols-outlined.opened {
  display: block;
}

.enquiry-dropdown-with-button .enquiry-button.icon.opened {
  background-color: var(--color-blue-300);
}