@use "@material/elevation/_index" as elevation;
@use "@material/radio/_index" as radio;
@use "@material/ripple/_index" as ripple;
@use "@material/rtl/_index" as rtl;
@use "@material/shape/_index" as shape;
@use "@material/theme/color-palette" as palette;
@use "~/util";

.settings-container {
  display: flex;
  justify-content: center;
  padding: 16px;
  .settings {
    width: 768px;
    max-width: 100%;
    &-group {
      .subheader {
        margin-bottom: 16px;
      }
      .mdc-card {
        margin-bottom: 16px;
        &.placeholder-account {
          padding: 12px 0;
        }
        .account {
          &::before,
          &::after {
            content: none;
          }
          .avatar {
            @include rtl.reflexive-box(margin, right, 16px);
            .user-icon {
              top: auto;
              @include rtl.reflexive-position(right, -6px);
              bottom: -6px;
            }
          }
          .button {
            @include rtl.reflexive-box(margin, left, auto);
            flex-shrink: 0;
            a {
              text-decoration: none;
            }
          }
        }
        .delete-container {
          padding: 16px;
          display: flex;
          justify-content: flex-end;
        }
        &.theme-card {
          padding: 16px;
          .theme-form-field {
            justify-content: stretch;
            margin-bottom: 16px;
            .mdc-typography--body2 {
              padding: 0;
              flex-grow: 1;
            }
            .field-container {
              @include rtl.reflexive-box(margin, left, 16px);
            }
            &.has-help-text {
              .mdc-typography--body2 {
                height: 56px;
                display: flex;
                align-items: center;
              }
            }
            &--flex {
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              .theme-form-field {
                align-items: flex-start;
              }
            }
            .mdc-select {
              @include rtl.reflexive-box(margin, left, 16px);
              .mdc-select__selected-text {
                min-width: 0;
                width: 112px;
              }
            }
            .mdc-text-field {
              min-width: 160px;
              &.picker__field.picker__field--inline {
                min-width: 310px;
              }
            }
            input[type="time"]::-webkit-calendar-picker-indicator {
              background: none;
            }
          }
          .theme-list.mdc-list {
            padding: 0;
            overflow: hidden;
            @include util.divider-border();
            .light {
              background-color: white;
              color: rgba(black, 0.87);
              @include radio.unchecked-stroke-color(rgba(black, 0.6));
              @include ripple.states(black);
            }
            .mint {
              background-color: palette.$teal-50;
              color: rgba(palette.$brown-900, 0.87);
              @include radio.unchecked-stroke-color(
                rgba(palette.$brown-900, 0.6)
              );
              @include ripple.states(palette.$brown-900);
            }
            .sepia {
              background-color: #e2dfd6;
              color: rgba(#3d3d38, 0.87);
              @include radio.unchecked-stroke-color(rgba(#3d3d38, 0.6));
              @include ripple.states(black);
            }
            .ocean,
            .grey,
            .deep-ocean,
            .deep,
            .dark {
              color: rgba(white, 0.87);
              @include radio.unchecked-stroke-color(rgba(white, 0.6));
              @include ripple.states(white);
            }
            .ocean {
              background-color: #243647;
            }
            .grey {
              background-color: #2c2d33;
            }
            .deep-ocean {
              background-color: #243137;
            }
            .deep {
              background-color: #23212a;
            }
            .dark {
              background-color: #1f1f1f;
            }
            .light,
            .sepia,
            .grey,
            .deep,
            .dark {
              @include radio.checked-stroke-color(palette.$deep-orange-200);
              @include radio.ink-color(palette.$deep-orange-200);
            }
            .mint {
              @include radio.checked-stroke-color(palette.$brown-400);
              @include radio.ink-color(palette.$brown-400);
            }
            .ocean,
            .deep-ocean {
              @include radio.checked-stroke-color(palette.$light-green-200);
              @include radio.ink-color(palette.$light-green-200);
            }
          }
        }
        &.density-card {
          padding: 16px;
        }
        .switch-container {
          display: flex;
          align-items: center;
          height: 48px;
          &.account {
            padding: 0 16px;
          }
          .mdc-form-field {
            flex-grow: 1;
            label {
              padding: 0;
              flex-grow: 1;
            }
            .mdc-switch {
              order: 1;
            }
          }
        }
        .text-field-container {
          display: flex;
          justify-content: stretch;
          align-items: center;
          &.account {
            padding: 8px 16px;
          }
          .mdc-form-field {
            flex-grow: 1;
            flex-wrap: wrap;
            .text-field-label {
              padding: 0;
              flex-grow: 1;
              display: flex;
              flex-direction: column;
              max-width: 320px;
            }
            .mdc-text-field {
              margin: 0;
              &.name-field {
                .mdc-text-field__icon {
                  cursor: default;
                }
              }
            }
          }
        }
      }
    }
    &-group:last-child {
      .mdc-card {
        margin-bottom: 0;
      }
    }
  }

  @media (max-width: 599px) {
    padding: 0;
    .settings {
      &-group {
        padding: 16px;
        .mdc-card {
          @include shape.radius(0);
          @include elevation.elevation(0);
          background-color: transparent;
          margin-bottom: 0;
          &.theme-card {
            padding: 0;
          }
          .account {
            padding: 0;
          }
          .switch-container.account,
          .text-field-container.account {
            padding: 0;
          }
          .delete-container {
            padding: 0;
          }
        }
        &:not(:last-child) {
          @include util.divider-border(bottom);
        }
      }
    }
  }
}
