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

.software-update {
  .page-settings-section {
    &__software-update-status {
      display: flex;
      width: 100%;
      max-width: 50rem;
      padding-bottom: 2.5rem;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.625rem;

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

      &__icon {
        width: 3.75rem;
        height: 3.75rem;
        border-radius: 1.875rem;
        color: var(--uc-success-success);
        text-align: center;
        font-size: 2.25rem;

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

        &--rotate {
          i {
            @include mixins.spin;
          }
        }
      }

      &--available-software {
        i {
          color: var(--uc-warning-warning);
        }
      }

      &--checking-update {
        i {
          color: var(--uc-text-text-primary);
        }
      }

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

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

        .button {
          margin-top: 1.25rem;
        }
      }
    }
  }

  .settings-option-button {
    .progress-bar {
      max-width: 6.25rem;
    }

    &--system-version,
    &--new-version {
      padding: 0;
      border-bottom: 1px solid var(--uc-theme-color-20);
      padding-bottom: 1.25rem;
      margin-bottom: 1.25rem;
    }

    // &--system-version {
    //   @media screen and (max-width: $bp-phone) {
    //     .settings-option-button__title,
    //     .settings-option-button__description {
    //       max-width: 100%;
    //     }
    //   }
    // }

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

      .settings-option-button__text {
        @media screen and (max-width: variables.$bp-phone) {
          width: 100%;
        }
      }

      .button-release-notes {
        display: flex;
        align-items: center;
        margin-right: 1.25rem;
        white-space: nowrap;

        i {
          display: block;
          font-size: 1.5rem;
          margin-right: 1rem;
        }
      }

      &__triggers {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: row;
        flex: 1;

        @media screen and (max-width: variables.$bp-phone) {
          width: 100%;
          justify-content: space-between;
        }
      }
    }
  }

  &__beta-update {
    position: relative;
    width: 100%;

    &__trigger {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }

    .form-item {
      border: 0;
    }
  }

  &__battery-message {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    border-radius: 0.5rem;
    background: rgba(42, 4, 4, 0.9);
    color: var(--uc-error-error-40);
    padding: 0.625rem 1rem;
    width: 100%;
    max-width: 15rem;

    i {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      color: var(--uc-error-error-40);
    }

    span {
      @include mixins.body-extrasmall;
    }
  }

  &__modal--beta-disclaimer {
    .modal-secondary {
      &__footer {
        .button {
          width: 100%;
        }
      }
    }
  }
}