@use '@/assets/css/constants' as constants;

[data-component=system-settings] {
  .root-content {
    padding: 30px;
    gap: 20px;

    .root-col {
      gap: 20px;

      > * {
        flex: 0 0 auto;
      }

      .settings-card {
        padding: 20px;
        gap: 20px;
        color: constants.$main-color;

        > .head {
          align-items: center;
          gap: 5px;

          .icon {
            font-size: constants.$SIZE_ICON_MD;
            flex: 0 0 auto;
          }

          .title {
            display: flex;
            font-size: 1.2em;
          }

          :nth-child(n+3) {
            flex: 0 0 auto;
            color: constants.$font-main-color;
          }

          .bt-save {
            color: constants.$main-color;
          }
        }
      }
    }
  }
}