@import "./../styles/index.scss";

#setting-account{
  .forgot-password-link {
    display: flex;
    flex-direction: row-reverse;
    padding-top: 5px;

    button{
      font-size: 12px;
    }
  }
  .popup-input{
    margin-bottom: 12px;
  }
  .section-block{
    .settings-switch {
      margin-right: 10px;
      .input-switch{
        label{
          margin-left: 0;
        }
        input[type=checkbox] + label {
          background-color: #b3b3b3;
          &::before {
            background-color: #b3b3b3;
          }
        }
        input[type=checkbox]:checked + label {
          background-color: #0091ff;
          &::before {
            background-color: #0091ff;
          }
        }
      }
    }

    .settings-switch-label{
      font-size: 13px;
      font-weight: 300;
    }
  }
}

#settings-general-recovery-email{
  .cptx-recovery-email{
    margin-top: 10px;
    text-align: center;
    width: 270px;

    &.cptx-recovery-email-confirmed{
      .cptx-recovery-email-address{
        background-color: #f6f9f2;
      }

      .cptx-recovery-email-status{
        color: #58a40b;
      }
    }

    &.cptx-recovery-email-not-confirmed{
      .cptx-recovery-email-address{
        background-color: #fff6f6;
      }

      .cptx-recovery-email-status{
        color: #da341a;
      }
    }

    .cptx-recovery-email-address{
      align-items: center;
      background-color: #f4f4f4;
      height: 29px;
      display: flex;

      .loading-ring{
        top: 2px;
        left: 122px;
      }

      span{
        font-size: 12px;
        margin: 0 auto;
      }
    }

    .cptx-recovery-email-status{
      span{
        font-size: 11px;
        font-weight: 600;
      }
    }
  }
}

#settings-general-usefullinks{
  .cptx-useful-link{
    color: #0091ff;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
  }
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_MAIN, $_COLOR_TEXT_MAIN_TITLE, $_BACKGROUND_COLOR_SETTINGS, $_COLOR_TEXT_SETTINGS_TITLE, $_BORDER_COLOR_SETTINGS_HEADER, $_COLOR_TEXT_SETTINGS_CONTENT){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    #setting-account{
      .section-block{
        .settings-switch-label {
          color: $_COLOR_TEXT_SETTINGS_CONTENT;
        }
      }
    }
  }
}
  
@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_MAIN_LIGHT, $_COLOR_TEXT_MAIN_TITLE_LIGHT, $_BACKGROUND_COLOR_SETTINGS_LIGHT, $_COLOR_TEXT_SETTINGS_TITLE_LIGHT, $_BORDER_COLOR_SETTINGS_HEADER_LIGHT, $_COLOR_TEXT_SETTINGS_CONTENT_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_MAIN_DARK, $_COLOR_TEXT_MAIN_TITLE_DARK, $_BACKGROUND_COLOR_SETTINGS_DARK, $_COLOR_TEXT_SETTINGS_TITLE_DARK, $_BORDER_COLOR_SETTINGS_HEADER_DARK, $_COLOR_TEXT_SETTINGS_CONTENT_DARK);