@use './colors';
@use 'sass:color';
@use './access-code-form' as acf;

@mixin climate-setting-control-group {
  .seam-climate-setting-control-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;

    .seam-climate-setting-slider-container {
      display: flex;
      justify-content: center;
    }
  }
}

@mixin temperature-control-group {
  .seam-temperature-control-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .seam-temperature-control-group-block {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 8px;

    .seam-temperature-control-group-block-thermostat-icon {
      font-size: 24px;
    }
  }
}

@mixin temperature-control-thumb-hover(
  $secondary-color: colors.$thermo-blue-faded
) {
  background-color: $secondary-color;
}

@mixin temperature-control-thumb(
  $primary-color: colors.$thermo-blue,
  $secondary-color: colors.$thermo-blue-faded
) {
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 1em;
  background: colors.$white;
  border: 2px solid $primary-color;
  box-shadow: none;
  cursor: grab;
  transition: 0.15s ease-in-out;

  &:hover {
    @include temperature-control-thumb-hover($secondary-color);
  }

  &:active {
    cursor: grabbing;
    background-color: $primary-color !important;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%) !important;
  }
}

@mixin temperature-control-ltr-track($primary-color: colors.$thermo-blue) {
  background:
    linear-gradient($primary-color, $primary-color) 0 / var(--slider-position)
      100% no-repeat,
    colors.$text-gray-3;
}

@mixin temperature-control-rtl-track($primary-color: colors.$thermo-blue) {
  background:
    linear-gradient($primary-color, $primary-color) 100% /
      calc(var(--slider-position-rtl)) 100% no-repeat,
    colors.$text-gray-3;
}

@mixin temperature-control-track($primary-color: colors.$thermo-blue) {
  height: var(--track-height);
  border-radius: 0.5em;
  border: none;
  box-shadow: none;
}

@mixin temperature-control {
  .seam-temperature-control {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 7px;

    svg {
      font-size: 20px;
    }
  }

  .seam-temperature-range-wrap {
    --thumb-size: 20px;
    --track-height: 4px;
    --temperature-min: 0;
    --temperature-max: 100;
    --temperature-current: 50;
    --temperature-range: calc(var(--temperature-max) - var(--temperature-min));
    --temperature-ratio: calc(
      (var(--temperature-current) - var(--temperature-min)) /
        var(--temperature-range)
    );
    --slider-position: calc(
      0.5 * var(--thumb-size) + var(--temperature-ratio) *
        (100% - var(--thumb-size))
    );
    --slider-position-rtl: calc(100% - var(--slider-position));

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  input[type='range'].seam-temperature-range {
    width: 160px;
    appearance: none;

    &:focus {
      outline: none;
    }

    &::-webkit-slider-thumb {
      appearance: none;
      margin-top: calc(var(--track-height) * 0.5 - var(--thumb-size) * 0.5);
    }

    &::-ms-thumb {
      margin-top: 0;
      box-sizing: border-box;
    }

    &::-ms-track {
      box-sizing: border-box;
    }

    &::-ms-fill-upper {
      background: transparent;
      border-color: transparent;
    }

    &::-ms-fill-lower {
      border-color: transparent;
      height: var(--track-height);
      border-radius: 0.5em 0 0 0.5em;
      margin: 0;
      border-style: none;
      border-right-width: 0;
    }

    &[data-variant='heat'] {
      &::-webkit-slider-thumb {
        @include temperature-control-thumb(
          colors.$thermo-orange,
          colors.$thermo-orange-faded
        );
      }

      &::-moz-range-thumb {
        @include temperature-control-thumb(
          colors.$thermo-orange,
          colors.$thermo-orange-faded
        );
      }

      &::-ms-thumb {
        @include temperature-control-thumb(
          colors.$thermo-orange,
          colors.$thermo-orange-faded
        );
      }

      &:focus {
        &::-webkit-slider-thumb {
          @include temperature-control-thumb-hover(colors.$thermo-orange-faded);
        }

        &::-moz-range-thumb {
          @include temperature-control-thumb-hover(colors.$thermo-orange-faded);
        }

        &::-ms-thumb {
          @include temperature-control-thumb-hover(colors.$thermo-orange-faded);
        }
      }

      &::-webkit-slider-runnable-track {
        @include temperature-control-track(colors.$thermo-orange);
        @include temperature-control-ltr-track(colors.$thermo-orange);
      }

      &::-moz-range-track {
        @include temperature-control-track(colors.$thermo-orange);
        @include temperature-control-ltr-track(colors.$thermo-orange);
      }

      &::-ms-track {
        @include temperature-control-track(colors.$thermo-orange);
        @include temperature-control-ltr-track(colors.$thermo-orange);
      }

      &::-ms-fill-lower {
        background: colors.$thermo-orange;
      }
    }

    &[data-variant='cool'] {
      &::-webkit-slider-thumb {
        @include temperature-control-thumb(
          colors.$thermo-blue,
          colors.$thermo-blue-faded
        );
      }

      &::-moz-range-thumb {
        @include temperature-control-thumb(
          colors.$thermo-blue,
          colors.$thermo-blue-faded
        );
      }

      &::-ms-thumb {
        @include temperature-control-thumb(
          colors.$thermo-blue,
          colors.$thermo-blue-faded
        );
      }

      &:focus {
        &::-webkit-slider-thumb {
          @include temperature-control-thumb-hover(colors.$thermo-blue-faded);
        }

        &::-moz-range-thumb {
          @include temperature-control-thumb-hover(colors.$thermo-blue-faded);
        }

        &::-ms-thumb {
          @include temperature-control-thumb-hover(colors.$thermo-blue-faded);
        }
      }

      &::-webkit-slider-runnable-track {
        @include temperature-control-track(colors.$thermo-blue);
        @include temperature-control-rtl-track(colors.$thermo-blue);
      }

      &::-moz-range-track {
        @include temperature-control-track(colors.$thermo-blue);
        @include temperature-control-rtl-track(colors.$thermo-blue);
      }

      &::-ms-track {
        @include temperature-control-track(colors.$thermo-blue);
        @include temperature-control-rtl-track(colors.$thermo-blue);
      }

      &::-ms-fill-lower {
        background: colors.$thermo-blue;
      }
    }
  }

  .seam-floating-temperature {
    position: absolute;
    top: -28px;
    left: calc(var(--slider-position) - 10px);

    .seam-floating-temperature-value {
      color: colors.$black;
      font-size: 16px;
      font-weight: 600;
      line-height: 1;
    }

    .seam-floating-temperature-unit {
      color: colors.$text-gray-2-5;
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
    }
  }

  .seam-temperature-stepper-button {
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid colors.$text-gray-3;
    background-color: colors.$white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    cursor: pointer;
    transition: 0.1s ease-in-out;

    &:focus {
      outline: none;
    }

    &:hover,
    &:focus {
      background-color: colors.$bg-a;
      border-color: colors.$text-gray-2;
    }

    &:active {
      background-color: colors.$bg-c;
      border-color: colors.$text-gray-1;
    }
  }
}

@mixin climate-setting-status {
  .seam-climate-setting-status {
    display: flex;
    align-items: center;
    gap: 4px;
    color: colors.$text-gray-1;
    line-height: 118%;
    white-space: nowrap;
  }

  .seam-climate-setting-status-icon {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;

    .seam-climate-setting-status-icon-heat-cool {
      font-size: 19px;
    }
  }
}

@mixin thermostat-card {
  .seam-thermostat-card {
    width: 100%;
    background-color: colors.$bg-a;
    border-radius: 16px;
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: stretch;

    .seam-thermostat-card-content {
      display: flex;
      align-items: flex-start;
      flex-direction: row;
      gap: 8px;
      align-self: stretch;
    }

    .seam-thermostat-card-image-wrap {
      padding: 24px;

      img {
        width: 80px;
        height: 80px;
        object-fit: contain;
      }
    }

    .seam-thermostat-heading-wrap {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      gap: 16px;
    }

    .seam-thermostat-card-heading {
      font-size: 21px;
      font-weight: 600;
      line-height: 132%;
      white-space: nowrap;
    }

    .seam-thermostat-temperature-toggle {
      appearance: none;
      width: 32px;
      height: 22px;
      box-shadow: none;
      border-radius: 5px;
      border: 1px solid colors.$text-gray-3;
      background-color: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: colors.$text-gray-1;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
    }

    .seam-thermostat-card-details {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      gap: 8px;
    }

    .seam-thermostat-properties-wrap {
      display: flex;
    }

    .seam-thermostat-properties {
      width: auto;
      display: grid;
      grid-template-columns: auto auto;
      gap: 8px 16px;
    }

    .seam-thermostat-property-block {
      display: flex;
      flex-direction: row;
      gap: 8px;

      &.seam-thermostat-property-icon-block {
        gap: 4px;
      }
    }

    .seam-thermostat-property-label {
      color: colors.$text-gray-2;
      font-size: 14px;
      font-weight: 400;
      line-height: 118%;
      white-space: nowrap;
    }

    .seam-thermostat-property-value {
      color: colors.$text-gray-1;
      font-size: 14px;
      font-weight: 400;
      line-height: 118%;
      white-space: nowrap;
    }

    .seam-thermostat-property-icon {
      width: 18px;
      height: 18px;
    }

    .seam-thermostat-property-tag {
      height: 18px;
      padding: 0 8px;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;

      &.seam-thermostat-property-tag-cooling {
        background-color: colors.$thermo-blue;
      }

      &.seam-thermostat-property-tag-heating {
        background-color: colors.$thermo-orange;
      }

      &.seam-thermostat-property-tag-fan {
        border: 1px solid colors.$text-gray-2-5;
        background-color: transparent;

        .seam-thermostat-property-tag-label {
          color: colors.$text-gray-1;
        }
      }

      &.seam-thermostat-property-tag-off {
        background-color: transparent;

        .seam-thermostat-property-tag-label {
          color: colors.$text-gray-1;
        }
      }

      .seam-thermostat-property-tag-label {
        color: colors.$white;
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
      }
    }
  }
}

@mixin mode-menu-common {
  .seam-thermo-mode-menu {
    .seam-menu-content {
      max-width: 180px;
      box-shadow:
        0 2px 16px 2px rgb(15 22 28 / 15%),
        0 0 1px 0 rgb(0 0 0 / 30%);
    }

    .seam-thermo-mode-menu-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
    }

    .seam-thermo-mode-menu-item-block {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      gap: 12px;
    }
  }

  .seam-thermo-mode-menu-icon {
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@mixin fan-mode-menu {
  .seam-fan-mode-menu-button {
    width: 130px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    border-radius: 6px;
    border: 1px solid colors.$text-gray-3;
    background: colors.$white;
    gap: 10px;
    cursor: pointer;
    transition: 0.2s ease;

    &.seam-fan-mode-menu-button-size-regular {
      height: 32px;
    }

    &.seam-fan-mode-menu-button-size-large {
      height: 48px;
    }

    svg {
      font-size: 20px;
    }

    &:hover {
      border-color: colors.$text-gray-2;
    }

    &:active {
      border: 1px solid colors.$text-gray-2;
      background: colors.$bg-c;
    }

    .seam-fan-mode-menu-button-block {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      gap: 10px;

      svg {
        font-size: 22px;
      }
    }

    &.seam-fan-mode-menu-button-block-sized {
      width: 100%;
    }

    .seam-fan-mode-menu-button-text {
      color: colors.$text-gray-1;
      font-size: 16px;
      font-weight: 400;
      line-height: 120%;
    }
  }
}

@mixin climate-mode-menu {
  .seam-climate-mode-menu-button {
    width: 72px;
    height: 32px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid colors.$text-gray-3;
    background: colors.$white;
    display: flex;
    align-items: center;
    flex-direction: row;
    cursor: pointer;
    transition: 0.2s ease;

    &.seam-climate-mode-menu-button-regular {
      height: 32px;
    }

    &.seam-climate-mode-menu-button-large {
      height: 48px;
    }

    &.seam-climate-mode-menu-button-block {
      width: 100%;
    }

    &:hover {
      border-color: colors.$text-gray-2;
    }

    &:focus {
      outline-color: colors.$text-gray-2;
    }

    &:active {
      background-color: colors.$bg-c;
      border-color: colors.$text-gray-2;
    }

    .seam-climate-mode-menu-button-chevron {
      font-size: 20px;
      margin-left: auto;
    }

    .seam-climate-mode-menu-button-text {
      font-size: 14px;
      margin-left: 6px;
    }
  }

  .seam-climate-mode-menu-button-icon {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }
}

@mixin status {
  .seam-thermostat-mutation-status {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 4px;
    opacity: 0;
    transition: 0.2s ease-in-out;

    &.is-visible {
      opacity: 1;
    }
  }

  .seam-thermostat-mutation-status-icon {
    opacity: 0.25;
  }

  .seam-thermostat-mutation-status-label {
    font-size: 14px;
    color: colors.$text-gray-2-5;
  }
}

@mixin climate-presets {
  .seam-thermostat-climate-presets-body {
    margin: 0 24px 24px;
    display: flex;
    flex-flow: column nowrap;
    gap: 10px;
    justify-content: center;
  }

  .seam-thermostat-climate-presets-cards {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    justify-content: center;
  }

  .seam-climate-presets-add-button {
    margin: 0 auto;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;

    svg {
      font-size: 20px;
    }

    svg,
    path {
      fill: currentcolor;
    }
  }

  .seam-thermostat-climate-presets-card {
    border-radius: 12px;
    background-color: colors.$bg-a;
    width: 100%;
    max-width: 250px;
    overflow: hidden;

    .seam-thermostat-climate-presets-card-top {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      gap: 8px;
      width: 100%;
      justify-content: space-between;
      border-bottom: 1px solid color.scale(colors.$bg-a, $lightness: -5%);
      padding: 8px;
      background-color: colors.$bg-b;

      .seam-thermostat-climate-presets-card-name {
        font-size: 16px;
        font-weight: 600;
        line-height: 118%;
        white-space: nowrap;
      }

      .seam-thermostat-climate-presets-card-name-key {
        font-size: 12px;
        font-weight: 400;
        line-height: 118%;
        white-space: nowrap;
        color: colors.$text-gray-2;
      }

      .seam-thermostat-climate-presets-card-buttons {
        display: flex;
        flex-flow: row nowrap;
        gap: 4px;
        justify-content: flex-end;
      }
    }

    .seam-thermostat-climate-presets-card-body {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px;
      justify-content: space-around;
    }

    .seam-thermostat-climate-preset-chip {
      display: inline-flex;
      flex-flow: row nowrap;
      gap: 4px;
      align-items: center;
      justify-content: space-between;
      width: max-content;

      .seam-thermostat-climate-preset-chip-icon {
        color: colors.$text-gray-1;
        font-weight: 600;

        svg {
          position: relative;
          top: 2px;
        }
      }

      .seam-thermostat-climate-preset-chip-value {
        font-weight: 600;
      }
    }
  }
}

@mixin climate-preset {
  .seam-thermostat-climate-preset {
    @include acf.main;

    .seam-climate-preset-buttons {
      display: flex;
      flex-flow: row nowrap;
      gap: 8px;
    }
  }
}

@mixin all {
  @include climate-setting-control-group;
  @include temperature-control-group;
  @include temperature-control;
  @include climate-setting-status;
  @include thermostat-card;
  @include mode-menu-common;
  @include fan-mode-menu;
  @include climate-mode-menu;
  @include status;
  @include climate-presets;
  @include climate-preset;
}