@use '../../../styles/Mixins/' as *;

.settings-modal {
  background-color: var(--settings-modal-bg) !important;
  font-family: Inter;

  .settings-modal-content {
    display: grid;
    row-gap: 2rem;
  }

  .settings-modal-header {
    font-weight: bold;
  }

  .settings-modal-items {
    display: grid;
    row-gap: 0.5rem;

    .settings-modal-item {
      display: grid;
      grid-auto-flow: column;
      background-color: var(--background-color);
      padding: 0.4rem 1rem;
      border-radius: 0.5rem;
      justify-content: space-between;
      align-items: center;
    }
  }

  .settings-modal-reset {
    display: grid;
    row-gap: 1rem;

    button {
      @include Button(
        $btn-color: var(--btn-red),
        $btn-color-hover: var(--btn-red-hover)
      );
    }
  }
}