@use "../../base/mixins";
@use "../../vars/variables";

.button-list {
  display: flex;
  position: relative;
  flex: 1;
  flex-direction: column;
  width: calc(100% + 1.825rem);
  overflow-y: hidden;
  padding-bottom: 0.625rem;

  @media screen and (max-width: variables.$bp-tablet) {
    width: 100%;
  }

  @media screen and (max-width: variables.$bp-phone) {
    width: calc(100% - 0.5rem);
  }

  &__header {
    display: flex;
    gap: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2.5rem;
    margin-right: 1.875rem;

    @media screen and (max-width: variables.$bp-tablet) {
      margin-right: 1.25rem;
    }

    .button {
      min-height: 2rem;
      max-height: 2rem;
      width: 1.75rem;
      padding: 0 0.125rem;
    }

    &__instruction {
      flex: 1;
      @include mixins.body-extrasmall;
    }

    &__actions {
      display: flex;
      gap: 0.625rem;
      align-items: center;
    }
  }

  &__body {
    position: relative;
    flex: 1;
    width: 100%;
    padding-right: 1.4rem;
    padding-bottom: 3.5rem;
    overflow-x: hidden;
    overflow-y: scroll;
    @include mixins.scrollbar;

    @media screen and (max-width: variables.$bp-tablet) {
      padding-right: 1.25rem;
      @include mixins.scrollbar-sqeezing;
    }
  }

  &__actions {
    @include mixins.list-footer-actions;

    .button-expand {
      @media screen and (max-width: variables.$bp-tablet) {
        display: none;
      }
    }
  }

  &__footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4rem;
    width: calc(100% - 0.5rem);
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .config-touch-slider__item,
  &__item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.625rem 0.625rem 0.375rem;
    background-color: transparent;
    margin-bottom: 0.625rem;
    border: 1px solid var(--uc-theme-color-30);
    border-radius: 1rem;
    min-height: 4.375rem;
    gap: 0.625rem;
    cursor: default;

    // &::after {
    //   position: absolute;
    //   content: '';
    //   width: 100%;
    //   height: 1px;
    //   left: 0;
    //   bottom: 0;
    //   background-color: var(--uc-theme-color-20);
    // }

    // &:last-child {
    //   &::after {
    //     display: none;
    //   }
    // }

    // @media (pointer: fine) {
    //   &:hover {
    //     background-color: var(--uc-foreground);
    //     border-color: var(--uc-foreground);

    //     .button-list__item {
    //       &__base {
    //         color: var(--uc-background);

    //         i {
    //           color: var(--uc-background);
    //         }
    //       }

    //       &__name {
    //         color: var(--uc-background);
    //       }

    //       &__config__expanded {
    //         .button-press {
    //           &__command {
    //             color: var(--uc-text-text-tertiary);

    //             &__entity {
    //               color: var(--uc-text-text-tertiary);
    //             }
    //           }

    //           &__symbol {
    //             &::before,
    //             &::after {
    //               background-color: var(--uc-text-text-tertiary);
    //             }
    //           }
    //         }
    //       }
    //     }
    //   }
    // }

    &__base {
      display: flex;
      flex-direction: row;
      gap: 0.625rem;
      flex: 1;
    }

    &__icon {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 3.125rem;

      i {
        font-size: 1.25rem;
        color: var(--uc-text-text-primary);
      }
    }

    &__name {
      @include mixins.body-large;
      color: var(--uc-text-text-primary);
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 0.56rem;

      .button-reset {
        border-color: transparent;
        background-color: transparent;
      }
    }

    &__config {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      justify-self: flex-end;
      width: 60%;
      transition: all 0.2s;

      @media screen and (min-width: variables.$bp-tablet-plus) {
        min-width: 10rem;
      }

      &__compact {
        position: absolute;
        right: 0;
        display: flex;
        align-items: center;
        gap: 0.625rem;
        max-width: 100%;

        @media screen and (max-width: variables.$bp-tablet) {
          flex-direction: column;
          gap: 0.325rem;
        }

        .button-press__symbol {
          position: relative;
        }

        .button-reset {
          color: var(--uc-text-text-tertiary);

          @media (pointer: fine) {
            &:hover {
              color: var(--uc-buttons-tertiary-button-tertiary-hover-text);
            }
          }
        }
      }

      &__expanded {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-right: 0.75rem;
      }

      .button-reset {
        @media screen and (max-width: variables.$bp-tablet) {
          display: none;
        }
      }
    }

    .button-press {
      &__symbol {
        background-color: var(--uc-theme-color-20);
      }
    }
  }
}

.edit-button-li {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  background: var(--uc-background);
  flex: 1;
  width: 100%;
  padding: 1.25rem 0 0.625rem;
  gap: 1.25rem;
  overflow: hidden;
  max-height: 100%;

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.25rem;

    &__main {
      display: flex;
      align-items: center;
      gap: 0.625rem;
    }
  }

  &__body {
    display: flex;
    max-height: calc(100% - 2.875rem);
    flex-direction: column;
    gap: 1.25rem;
    padding: 0 1.25rem 0.625rem;
    overflow-x: hidden;
    overflow-y: auto;
    @include mixins.scrollbar;
  }

  &__loader {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 1.5rem;
    height: 1.5rem;

    img {
      width: 100%;
      height: 100%;
      min-height: 1.375rem;
    }
  }

  &__command-wrapper,
  &__param-wrapper {
    display: flex;
    width: 100%;
    border-radius: 0.5rem;
  }

  &__command-wrapper {
    flex-direction: column;
    background: var(--uc-bg-bg-surface-1);
    overflow: hidden;
    max-height: 64vh;
    max-height: 64dvh;
    min-height: 4.75rem;

    @media screen and (max-height: 800px) {
      max-height: 74vh;
      max-height: 74dvh;
    }

    &__information {
      display: flex;
      flex: 1;
      align-items: center;
      padding: 0.75rem;
    }

    &--minimal {
      min-height: 3.75rem;
    }

    &--open {
      min-height: 15.75rem;
    }
  }

  &__params {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    &__field-optional {
      width: 1rem;
    }
  }

  &__param-wrapper {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;

    & > .command-param {
      flex: 1;
      min-width: 2rem;
    }

    &--custom {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 0.75rem;
      border: 1px solid var(--uc-theme-color-40);
      border-radius: 0.5rem;

      .edit-button-li__param-wrapper__label {
        @include mixins.body-small;
        color: var(--uc-text-text-secondary);
      }
    }
  }

  // &__command {
  //   display: flex;
  //   justify-content: space-between;
  //   gap: 1rem;
  //   align-items: center;
  //   padding: 0.75rem 0.75rem;

  //   &__main {
  //     display: flex;
  //     flex-direction: column;
  //     gap: 0.25rem;
  //   }

  //   &__label {
  //     display: inline-flex;
  //     @include body-extrasmall;
  //     line-height: 100%;
  //     color: rgba(255, 255, 255, 0.60);
  //   }

  //   &__value {
  //     display: flex;
  //     flex-direction: column;

  //     span:first-child {
  //       @include body-large;
  //       color: var(--uc-white);
  //     }

  //     &__entity {
  //       @include body-extrasmall;
  //       color: var(--uc-white);
  //     }
  //   }

  //   &__toggle {
  //     &--open {
  //       -webkit-transform: rotate(180deg);
  //       transform:rotate(180deg);
  //     }
  //   }
  // }

  &__reset {
    &__button {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 0.625rem;

      button {
        width: 1.75rem;
        height: 1.75rem;
        min-height: 1.75rem;

        i {
          font-size: 0.875rem;
        }
      }

      span {
        @include mixins.button-label;
        cursor: pointer;
      }
    }
  }

  &--touch-slider {
    position: relative;

    .edit-button-li__command-wrapper {
      min-height: 3.75rem;
    }

    .command-select-wrapper {
      .list-with-filter__form {
        display: none;
      }
    }
  }
}

.edit-button-li-wrapper {
  position: fixed;
  // Centres the popup vertically within the full-height wrapper. This used to
  // be applied as an inline `display:flex` by the popup's imperative open code;
  // with the <Transition> rewrite the wrapper is shown via v-if/v-show, so the
  // flex context has to live in CSS or `align-items` below is a no-op.
  display: flex;
  z-index: var(--uc-vselect-z-index);
  width: 22.5rem;
  max-width: 98vw;
  top: 0.5rem;
  align-items: center;
  height: calc(100vh - 1rem);
  height: calc(100dvh - 1rem);

  @media screen and (max-width: variables.$bp-tablet) {
    position: fixed;
    left: calc(50vw - 11.25rem) !important;
  }

  &--fixed {
    left: calc(50vw - 11.25rem) !important;
  }

  &--remote {
    .edit-button-li {
      &__command-wrapper {
        min-height: 3.75rem;
      }
    }
  }

  &.grow-from-top {
    animation: growFromTop 0.5s forwards;
  }

  &.grow-from-center {
    animation: growFromCenter 0.5s forwards;
  }

  &.grow-from-bottom {
    animation: growFromBottom 0.5s forwards;
  }

  &.shrink-to-top {
    animation: shrinkToTop 0.5s forwards;
  }

  &.shrink-to-center {
    animation: shrinkToCenter 0.5s forwards;
  }

  &.shrink-to-bottom {
    animation: shrinkToBottom 0.5s forwards;
  }

  // Vue <Transition name="popup-grow"> drives the open/close animation
  // declaratively; the editor composable no longer toggles the classes above.
  &.popup-grow-enter-active {
    animation: growFromCenter 0.5s forwards;
  }

  &.popup-grow-leave-active {
    animation: shrinkToCenter 0.5s forwards;
  }
}

@keyframes growFromTop {
  0% {
    transform: scale(0, 0);
    transform-origin: left top;
  }
  100% {
    transform: scale(1, 1);
    transform-origin: left top;
  }
}

@keyframes growFromCenter {
  0% {
    transform: scale(0, 0);
    transform-origin: left 200px;
  }
  100% {
    transform: scale(1, 1);
    transform-origin: left 200px;
  }
}

@keyframes growFromBottom {
  0% {
    transform: scale(0, 0);
    transform-origin: left bottom;
  }
  100% {
    transform: scale(1, 1);
    transform-origin: left bottom;
  }
}

@keyframes shrinkToTop {
  0% {
    transform: scale(1, 1);
    transform-origin: left top;
  }
  100% {
    transform: scale(0, 0);
    transform-origin: left top;
  }
}

@keyframes shrinkToCenter {
  0% {
    transform: scale(1, 1);
    transform-origin: left 200px;
  }
  100% {
    transform: scale(0, 0);
    transform-origin: left 200px;
  }
}

@keyframes shrinkToBottom {
  0% {
    transform: scale(1, 1);
    transform-origin: left bottom;
  }
  100% {
    transform: scale(0, 0);
    transform-origin: left bottom;
  }
}

.edit-button-li-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: var(--uc-vselect-z-index);
}

@include mixins.transition-collapse-command;
@include mixins.transition-collapse-small;
@include mixins.transition-opacity-fast;