@use "vars" as vars;

.plover-dashboard-main {

  .customize-settings {
    display: flex;
    flex-wrap: wrap;

    .customize-setting-wrap {
      width: 50%;
      flex-shrink: 0;
      padding: vars.$spacing-sm;

      .customize-setting {
        border: 1px solid vars.$neutral-300;
        border-radius: vars.$border-radius;
        background: vars.$neutral-0;
        padding: vars.$spacing;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        text-decoration: none;
        font-size: 14px;
        height: 100%;

        &:hover {
          border-color: vars.$primary-active;

          svg {
            fill: vars.$primary-active;
          }
        }

        > * {
          margin-bottom: 24px;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .customize-setting-icon svg {
          width: 36px;
          height: 36px;
        }
      }
    }

    @media screen and (min-width: 1366px) {
      .customize-setting-wrap {
        width: 25%;
      }
    }
  }
}