.pageSettings {
  gap: 2rem;

  .accountSettingsNotice {
    background: var(--bg-color);
    border-radius: var(--roundness);
    box-shadow: 0 0 0 0.2rem var(--sub-alt-color);
    // background: color-mix(in srgb, var(--sub-alt-color) 50%, transparent);
    // background: var(--sub-alt-color);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    .icon {
      font-size: 2rem;
      margin-left: 1rem;
      margin-right: 1rem;
      color: var(--sub-color);
    }
    button {
      padding: 1rem;
    }
  }

  .tip {
    color: var(--sub-color);
    text-align: center;
  }

  .sectionGroupTitle {
    font-size: 2rem;
    width: max-content;
    margin: -0.25em;
    padding: 0.25em;

    .fas {
      transition: transform 0.25s;
    }

    &.rotateIcon .fas {
      transform: rotate(-90deg);
    }
  }

  .sectionSpacer {
    height: 1.5rem;
  }

  .settingsGroup {
    display: grid;
    gap: 2rem;
    &.quickNav {
      justify-content: center;
      .links {
        font-size: 0.75rem;
        background: var(--sub-alt-color);
        border-radius: var(--roundness);
        max-width: fit-content;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        a:first-child {
          padding-left: 2em;
        }
        a:last-child {
          padding-right: 2em;
        }
        a {
          padding: 1em;
          flex-grow: 1;
        }
      }
    }
  }

  .section {
    display: grid;
    // gap: .5rem;
    grid-template-areas:
      "title title"
      "text buttons";
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 2rem;
    row-gap: 0.5rem;
    align-items: start;

    &.fullWidth {
      // grid-template-columns: 2fr 1fr;
      grid-template-areas:
        "title tabs"
        "text text"
        "buttons buttons";
      column-gap: 2rem;
      // row-gap: 0.5rem;

      .buttons {
        margin-left: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
        gap: 0.5rem;
      }
    }

    .inputAndButton {
      display: grid;
      grid-template-columns: auto min-content;
      // gap: 0.5rem;
      margin-bottom: 0.5rem;

      span {
        display: flex;
        gap: 0.5rem;
      }
      .button {
        height: auto;

        .fas {
          margin-right: 0rem;
        }
      }

      .hasError {
        animation: shake 0.1s ease-in-out infinite;
      }

      .statusIndicator {
        visibility: hidden;
      }

      input {
        padding-right: 0.5em !important;
      }
      &:has(input:focus),
      &:has([data-indicator-status="failed"]) {
        .statusIndicator {
          visibility: visible;
        }
        input {
          padding-right: 2.2em !important;
        }
      }
    }

    .rangeGroup {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 1rem;
    }

    &[data-config-name="autoSwitchThemeInputs"] {
      grid-template-areas: unset;
      grid-template-columns: 1fr 3fr 1fr 3fr;
      gap: 2rem;
      select {
        width: 100%;
      }
    }

    &.themes .tabContainer [tabcontent="custom"] {
      label.button:first-child {
        color: var(--text-color);
      }
      label.button {
        color: var(--bg-color);
      }
    }

    &[data-config-name="fontFamily"],
    &[data-config-name="customBackgroundSize"],
    &.fpsLimit {
      .separator {
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
        grid-column: span 2;
        // color: var(--sub-color);
        display: grid;
        gap: 1em;
        grid-template-columns: 1fr auto 1fr;
        place-items: center;
      }
      .line {
        width: 100%;
        height: 0.25em;
        border-radius: 0.25em;
        background: var(--sub-alt-color);
      }
    }

    &.fpsLimit {
      .inputs {
        button,
        input {
          width: 100%;
        }
      }
    }

    &[data-config-name="fontFamily"] {
      grid-template-areas:
        "title title"
        "text tabs"
        "buttons buttons";
      .topRight {
        grid-area: tabs;
        align-self: end;
        .separator {
          margin-bottom: 0;
        }
        .usingLocalFont {
          button {
            width: 100%;
          }
        }
        .uploadContainer {
          label {
            width: 100%;
            margin-bottom: 0.5em;
          }
        }
      }
    }

    &[data-config-name="customBackgroundSize"] {
      //TOOD
      .uploadContainer {
        grid-column: span 2;
        margin-bottom: 0.5em;
        margin-top: 0.5em;
      }
      label.button {
        width: 100%;
      }

      .usingLocalImage {
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;
        margin-bottom: 0.5em;
        button {
          width: 100%;
        }
      }
    }

    &[data-config-name="customBackgroundFilter"] {
      .groups {
        grid-area: buttons;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin-top: 2rem;
        .group {
          display: grid;
          grid-template-columns: 1fr auto 2fr;
          gap: 1rem;
          .title,
          .value {
            color: var(--text-color);
          }
        }
      }
      .saveContainer {
        grid-column: -1/-3;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
      }
      .fas {
        margin-right: 0rem;
      }
    }

    & .allCustomThemes.buttons {
      grid-column: 1;
      grid-row: 1;
      margin-bottom: 1rem;
    }

    .groupTitle {
      font-size: 1rem;
      color: var(--sub-color);
      margin: 0;
      grid-area: title;
      font-weight: 300;
      display: flex;
      align-items: baseline;
      .fab,
      .fas,
      .far,
      .textIcon {
        margin-right: 0.5em;
      }
    }

    &.themes .groupTitle {
      .fab,
      .fas,
      .far {
        margin-bottom: 0;
      }
    }

    p {
      grid-area: text;
      color: var(--sub-color);
      margin: 0;
    }

    & > .text {
      align-self: normal;
      color: var(--text-color);
      grid-area: text;
      .red {
        line-height: 2rem;
        color: var(--error-color);
      }
    }

    .inputs {
      grid-area: buttons;
    }

    .buttons {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
      gap: 0.5rem;
      grid-area: buttons;
      &.vertical {
        grid-auto-flow: unset;
      }
    }

    &[data-config-name="paceCaret"] {
      .buttons {
        grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
      }
    }

    &[data-config-name="timerStyle"] {
      .buttons {
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
      }
    }

    &.tags {
      .tagsListAndButton {
        grid-area: buttons;
      }

      .tag {
        grid-template-columns: auto min-content min-content min-content;
        margin-bottom: 0.5rem;
      }
    }

    &.presets {
      .presetsListAndButton {
        grid-area: buttons;
      }

      .preset {
        grid-template-columns: auto min-content min-content;
        margin-bottom: 0.5rem;
      }
    }

    &.themes {
      .tabContainer {
        position: relative;
        grid-area: buttons;

        .tabContent {
          overflow: revert;
          height: auto;

          &.customTheme {
            grid-template-columns: 1fr;

            .customThemeInputs {
              display: grid;
              // margin-block: 1em;
              margin-bottom: 1em;
              grid-template-columns: 1fr 1fr;
              gap: 1rem;

              .customThemeInput {
                display: grid;
                color: var(--text-color);
                grid-template-columns: 20em 1fr;
                align-items: center;
                gap: 1em;

                .inputAndButton {
                  margin-bottom: 0;
                  width: 100%;
                  input {
                    width: 100%;
                  }

                  .button {
                    margin-left: 0.5em;
                  }
                }
              }

              .colorfulHeader {
                grid-column: 1/-1;
                // margin-left: 0.5em;
                color: var(--sub-color);
              }
            }

            .customThemeButtons {
              display: grid;
              margin-top: 0.5em;
              grid-template-columns: 1fr 1fr 1fr;
              grid-column: 1/-1;
              gap: 0.5em;
            }
          }
        }
      }

      .theme.button {
        .favButton {
          place-self: start;
          overflow: hidden;
          width: 1.25rem;
          transition: 0.25s;
          opacity: 0;
          .far,
          .fas {
            margin: 0;
            pointer-events: none;
          }
          &:hover {
            cursor: pointer;
          }
          &.active {
            width: 1.25rem;
            opacity: 1;
          }
        }
        &:hover {
          .favButton {
            width: 1.25rem;
            opacity: 1;
          }
        }
      }

      .customTheme.button {
        .delButton,
        .editButton {
          place-self: start;
          overflow: hidden;
          width: 1.25rem;
          transition: 0.25s;
          opacity: 0;
          .far,
          .fas {
            margin: 0;
            pointer-events: none;
          }
          &:hover {
            cursor: pointer;
          }
          &.active {
            width: 1.25rem;
            opacity: 1;
          }
        }
        .delButton {
          justify-self: end;
        }
        &:hover {
          transform: scale(1.1);
          .editButton {
            width: 1.25rem;
            opacity: 1;
          }
          .delButton {
            width: 1.25rem;
            opacity: 1;
          }
        }
      }

      .customTheme.button,
      .theme.button {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        .text {
          color: inherit;
        }
        .activeIndicator {
          overflow: hidden;
          width: 1.25rem;
          transition: 0.25s;
          opacity: 0;
          color: inherit;
          .far {
            margin: 0;
          }
          &.active {
            width: 1.25rem;
            opacity: 1;
          }
        }
        &.active {
          box-shadow: 0 0 0 0.2em var(--main-color);
          transform: scale(1.1);
          .themeBubbles {
            opacity: 1;
          }
          .activeIndicator {
            opacity: 1;
          }
        }
      }
    }

    &.themes {
      grid-template-areas:
        "title tabs"
        "buttons buttons";
      column-gap: 2rem;
      // row-gap: 0.5rem;

      .tabs {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 0.5rem;
        grid-area: tabs;
      }

      .buttons {
        margin-left: 0;
        grid-auto-flow: dense;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)) !important;
        gap: 0.5rem;
        .button {
          transition: transform 0.125s;
          &:hover .themeBubbles {
            opacity: 1;
          }
          .themeBubbles {
            transition: 0.125s;
            opacity: 0;
            display: grid;
            grid-auto-flow: column;
            gap: 0.5em;
            border-radius: 1.25em;
            height: 1em;
            margin-top: 0.125em;
            width: max-content;
            justify-self: end;
            // background: var(--bg-color);
            // outline: 0.25rem solid var(--bg-color);
            .themeBubble {
              width: 1em;
              height: 1em;
              border-radius: 100%;
            }
          }
        }
      }
    }

    &.passwordAuthSettings {
      .buttons {
        grid-template-rows: repeat(auto-fill, 1fr);
        grid-template-columns: repeat(2, minmax(4.5rem, 1fr));

        #removePasswordAuth,
        #addPasswordAuth {
          grid-column: span 2;
        }
      }
    }

    &.highlight {
      margin: -1em;
      padding: 1em;
      animation: flashBorder 4s ease-in forwards;
      box-shadow: 0 0 0 0.2em var(--sub-color);
      border-radius: var(--roundness);
    }

    .groupTitle button.text {
      padding: 0;
      margin-left: 0.5em;
      align-self: center;
      opacity: 0;
      .fas {
        margin-right: 0;
      }
    }
    &:hover .groupTitle button.text {
      opacity: 1;
    }
  }
}

.buttons div.theme:hover {
  transform: scale(1.1);
}
