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

.button-press {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;

  &__main {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  &__symbol {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.75rem;
    height: 1.25rem;
    align-items: center;
    gap: 0.25rem;
    border-radius: 1rem;
    background-color: var(--uc-theme-color-30);
    padding: 0.375rem 0.75rem;

    &::before,
    &::after {
      position: relative;
      content: "";
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 0.375rem;
      background-color: var(--uc-theme-color-40);
    }

    &::before {
      margin-left: 0;
      margin-right: auto;
    }

    &::after {
      display: none;
    }
  }

  &__command {
    @include mixins.secondary-body-small;
    display: flex;
    flex-direction: column;
    color: var(--uc-theme-color-60);

    &__entity {
      @include mixins.secondary-body-extrasmall;
      color: rgba(255, 255, 255, 0.6);
    }
  }

  &__dangling,
  &__testing {
    display: flex;
    align-items: center;
    min-width: 2.125rem;
    min-height: 2.45rem;
    padding-left: 0.125rem;
  }

  &__dangling {
    justify-content: center;

    i {
      color: var(--uc-error-error-60);
      font-size: 0.9375rem;
    }
  }

  &__testing {
    button.button {
      width: 1.75rem;
      height: 1.75rem;
      min-height: 1.75rem;
      border-radius: 50%;

      i {
        font-size: 0.875rem;
        margin-left: 1px;
      }
    }
  }

  &--double {
    .button-press__symbol {
      &::after {
        display: inline-block;
      }
    }
  }

  &--long {
    .button-press__symbol {
      &::before {
        width: 1.25rem;
      }
    }
  }

  &--active,
  &--dangling {
    .button-press {
      &__symbol {
        &::before,
        &::after {
          background-color: var(--uc-white);
        }
      }

      &__command {
        color: var(--uc-white);
      }
    }
  }

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

  &--dangling {
    .button-press {
      &__symbol {
        background-color: var(--uc-error-error-60);
      }
    }
  }

  &--expanded-mode {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    &:last-child {
      border: 0;
    }

    .button-press {
      &__main {
        gap: 0.75rem;
        flex: 1;
        gap: 0.75rem;
        min-height: 2.45rem;
        padding: 0.5rem 0.25rem 0.5rem 0.5rem;
        cursor: pointer;
        max-width: 100%;
        overflow: hidden;

        @media (pointer: fine) {
          &:hover {
            border-radius: 0.5rem;
            background: rgba(255, 255, 255, 0.2);
            border-color: transparent;

            .button-press {
              &__symbol {
                &::before,
                &::after {
                  background: var(--uc-theme-color-60);
                }
              }

              &__command {
                color: var(--uc-theme-color-80);
              }
            }
          }
        }
      }

      &__symbol {
        background: transparent;
        padding-left: 0;
        padding-right: 0;
        width: 1.25rem;
      }
    }
  }

  &--mini-mode {
    .button-press {
      &__symbol {
        background: transparent;
        padding: 0;
        height: 0.5rem;
        width: 1.25rem;
      }
    }

    &.button-press {
      &--active {
        .button-press__symbol {
          &::before,
          &::after {
            background-color: var(--uc-theme-accent);
          }
        }
      }

      &--dangling {
        .button-press__symbol {
          &::before,
          &::after {
            background-color: var(--uc-error-error-60);
          }
        }
      }
    }
  }

  &--has-title {
    min-height: 2.5rem;
    gap: 0.625rem;
    padding-left: 0.375rem;
    padding-right: 0.375rem;

    .button-press {
      &__dangling,
      &__testing {
        margin-left: auto;
        margin-right: 0;
      }
    }
  }

  &--indicator {
    cursor: default;
  }
}