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

// Edit page: Activity - sequences
// Edit page: Macro - sequences
.ep-sequences {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  justify-content: space-around;

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

  &__selector {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 1.875rem;
    gap: 0.625rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;

    @media screen and (max-width: variables.$bp-phone) {
      justify-content: flex-start;
    }

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

    .v-select {
      max-width: 17.375rem;

      @media screen and (max-width: variables.$bp-phone) {
        flex: 1;
        max-width: 22rem;
      }
    }
  }

  &__list {
    padding: 0 1.875rem;
    margin-top: 1.875rem;
    margin-bottom: 1.375rem;
    flex: 1;

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

  .sequence-list {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  &--activity {
    .sequence-list {
      &__header {
        &__base-items {
          @media screen and (max-width: variables.$bp-tablet) {
            display: none;
          }
        }
      }
    }
  }
}

// Edit page: Activity - settings
// Edit page: Macro - settings
// Edit page: Activity group - settings
// Edit page: Entity
// Edit page: Integration
// Edit page: Remote
// Edit page: Dock

.ep-settings {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  justify-content: space-around;
  padding-top: 1.25rem;
  @include mixins.scrollbar;

  @media screen and (max-width: variables.$bp-tablet) {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 1.25rem;
    @include mixins.scrollbar-sqeezing;
  }

  &--has-info-panels {
    @media screen and (max-width: variables.$bp-tablet) {
      padding-bottom: 2.5rem;
    }
  }

  &__form {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1.875rem 0;
    margin-bottom: 1.375rem;
    z-index: 1;
    @include mixins.scrollbar;

    @media screen and (min-width: variables.$bp-tablet-plus) {
      overflow-x: hidden;
      overflow-y: auto;
      padding-bottom: 2.5rem;
    }

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

    &--has-info-panel {
      @media screen and (min-width: variables.$bp-tablet-plus) {
        padding-bottom: 0.25rem;
      }
    }

    hr {
      border-color: rgba(255, 255, 255, 0.05);
    }

    .select-extra {
      .v-select {
        min-width: 8.125rem;
      }
    }

    &__wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 31.25rem;
      gap: 1.25rem;
      flex: 1;
    }

    &__header {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      gap: 1.25rem;

      .icon-container {
        width: 3.75rem;
        height: 3.75rem;
        font-size: 1.5rem;

        @media screen and (max-width: variables.$bp-tablet) {
          width: 5.625rem;
          height: 5.625rem;
          font-size: 2.25rem;
        }
      }

      &__integration {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.625rem;

        span {
          @include mixins.body-extrasmall;
          color: var(--uc-text-text-secondary);
        }

        .selected-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 2rem;
          height: 2rem;

          i {
            color: var(--uc-theme-color-60);
          }
        }
      }
    }

    &__row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 0.625rem;
      width: 100%;
    }

    &__footer {
      display: flex;
      flex-direction: column;
      margin-top: auto;
      margin-bottom: 0;
      width: 100%;

      &__row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 1.25rem;
        margin-bottom: 1.25rem;
        border-bottom: 1px solid var(--uc-theme-color-20);
        width: 100%;

        &:last-child {
          border: 0;
          margin-bottom: 0;
        }

        &--dock-factory-reset {
          .ep-settings__form__meta {
            .button {
              width: fit-content;
            }
          }
        }

        &--integration-developer,
        &--dock-factory-reset {
          @media screen and (max-width: variables.$bp-phone) {
            flex-direction: column;
            gap: 1.25rem;

            .ep-settings__form__meta {
              width: 100%;

              .button {
                width: calc(100% - 1.75rem);
              }
            }
          }
        }
      }
    }

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

      &__icon {
        display: flex;
        padding: 0.25rem;
        justify-content: center;
        align-items: center;
        height: 2rem;
        min-width: 2rem;
        border-radius: 1.25rem;
        background: var(--uc-buttons-secondary-button-secondary-bg);
        color: var(--uc-buttons-secondary-button-secondary-text);
        transition: all 0.2s;

        &--active {
          background: var(--uc-theme-accent);
          color: var(--uc-black);
        }

        i {
          font-size: 0.9rem;
        }
      }

      &__text {
        @include mixins.body-extrasmall;
        color: var(--uc-text-text-tertiary);
      }
    }

    &__description {
      @include mixins.body-extrasmall;
      color: var(--uc-text-text-secondary);
      margin-top: 1rem;
    }

    &__meta {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      max-width: 100%;

      &__label {
        display: flex;
        align-items: center;
        @include mixins.body-large;
        color: var(--uc-text-text-primary);
      }

      &__value {
        @include mixins.secondary-body-extrasmall;
        color: var(--uc-text-text-secondary);
      }

      a.ep-settings__form__meta__value,
      .ep-settings__form__meta__value--url {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .button-unpair {
        margin-left: 0.625rem;
      }

      &--item-status {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0.375rem;

        i {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 2rem;
          font-size: 1.2rem;
        }

        span {
          @include mixins.body-extrasmall;
        }

        &--simple {
          i {
            font-size: 1.5rem;
            width: 1.5rem;
          }
        }
      }

      &--green {
        color: var(--uc-success-success);
      }

      &--red {
        color: var(--uc-error-error-60);
      }
    }

    .form-item--toggle {
      padding-left: 0;
      padding-right: 0;
    }

    &__info-panel-wrapper {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
      position: absolute;
      bottom: 0;
      width: 100%;
      z-index: 5005;

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

      @media screen and (max-width: variables.$bp-tablet) {
        position: fixed;
        bottom: 0.625rem;
        left: 0.625rem;
        width: calc(100vw - 1.25rem);
      }
    }
  }

  &__included-entities,
  &__configured-entities,
  &__ir-code-data-set {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1.875rem 1rem;
    border-right: 0;
    overflow: hidden;

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

    &__wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      max-width: 33.75rem;

      @media screen and (max-width: variables.$bp-tablet) {
        display: flex;
        max-height: 70vh;
        max-height: 70dvh;
        z-index: 1;

        .list-with-filter {
          display: flex;
          flex: 1;
          overflow: hidden;

          &__items {
            flex: 1;
            overflow: hidden;
          }
        }
      }
    }
  }

  &__included-entities,
  &__configured-entities {
    @media screen and (max-width: variables.$bp-tablet) {
      padding-left: 1.25rem;
      padding-right: 0.625rem;
    }
  }

  &__configured-entities {
    &__wrapper {
      max-width: 35.45rem;

      .list-with-filter {
        &__form {
          @media screen and (min-width: variables.$bp-tablet-plus) {
            padding-right: 1.7rem;
          }
        }
      }
    }

    .configured-entity-list {
      &__header {
        @media screen and (min-width: variables.$bp-tablet-plus) {
          padding-left: 1rem;
          padding-right: 2.7rem;
        }
      }
    }
  }

  &__available-entities {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(40% + 0.125rem);
    height: calc(100% - 1.25rem);
    background-color: var(--uc-bg-bg-surface-1);
    overflow: hidden;
    padding: 1.875rem 1.875rem 0;
    z-index: 2;
    margin-bottom: 1.25rem;

    @media screen and (max-width: variables.$bp-tablet) {
      position: fixed;
      top: 7.5625rem;
      left: 0.625rem;
      width: calc(100% - 1.25rem);
      height: calc(100% - 8.375rem);
      border-radius: 1.25rem;
    }

    &__wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      max-width: 31.25rem;

      @media screen and (max-width: variables.$bp-tablet) {
        padding-bottom: 0.625rem;
      }
    }

    &__header {
      .button--icon {
        margin-right: 1rem;
      }
    }

    .lwf-entity-list {
      &__items {
        width: calc(100% + 1rem);
      }
    }
  }

  &__no-settings {
    display: flex;
    justify-content: center;
    align-items: center;

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

    p {
      @include mixins.body-large;
      text-align: center;
      color: var(--uc-text-text-secondary);
    }
  }

  &__ir-code-data-set {
    @media screen and (max-width: variables.$bp-tablet) {
      padding-left: 0;
      padding-right: 0;
    }
  }

  &__driver-connection {
    background: var(--uc-bg-bg-surface-2);
    border-radius: 1rem;
    padding: 1.25rem;

    &__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      border-bottom: 1px solid var(--uc-theme-color-40);
      padding-bottom: 1.25rem;
      margin-bottom: 1.25rem;

      &:last-child {
        border: 0;
        padding-bottom: 0;
        margin-bottom: 0;
      }
    }

    &__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 1.25rem;
      margin-bottom: 1.25rem;
      border-bottom: 1px solid var(--uc-theme-color-40);
    }

    &__body {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
  }

  &__start-setup {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;

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

    button {
      min-width: 10.75rem;
      max-height: 2.25rem;
    }

    p {
      @include mixins.secondary-body-extrasmall;
      display: flex;
      align-items: center;
      color: var(--uc-text-text-secondary);
      flex: 1;
    }
  }

  &__dock-config {
    display: flex;
    flex-direction: row;
    gap: 1.875rem;

    .button {
      flex: 1;
    }
  }

  &__dock-mobile-config {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--uc-theme-color-20);
    margin-bottom: -0.625rem;

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

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

      &--hybrid {
        @media screen and (max-width: variables.$bp-phone) {
          width: fit-content;
        }
      }
    }

    .form-item {
      &--range {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        margin-bottom: 1.25rem;
        border-top: 1px solid var(--uc-theme-color-20);
        border-bottom: 1px solid var(--uc-theme-color-20);

        &__header {
          max-width: 100%;
        }

        &__container {
          max-width: 100%;
        }
      }
    }
  }
}

.touch-screen {
  .ep-settings {
    &__form {
      @media screen and (min-width: variables.$bp-tablet-plus) {
        padding-top: 1.25rem;
      }
    }

    &__configured-entities {
      .entity-item {
        &__edit {
          opacity: 1;
        }
      }
    }
  }
}