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

#settings-account-backup {
  .cptx-section-item-title {
    &.auto-backup {
      margin-top: 17px;
    }
  }
  .cptx-section-item-control {
    &.manual-backup {
      top: 17px;
    }
    &.auto-backup {
      top: 50px;
    }
  }

  > .ctpx-section-item-options {
    width: 100%;
    margin-top: 17px;
    display: flex;
    flex-direction: column;
    .ctpx-item-option {
      display: flex;
      line-height: 27px;
      margin-bottom: 5px;
      .item-option-label {
        min-width: 130px;
      }
      .item-option-content {
        width: calc(100% - 130px);
        &.ctpx-autobackup-path {
          border-width: 1px;
          border-style: solid;
          border-radius: 5px 0px 0px 5px;
          padding: 0px 10px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        &.cptx-section-item-control {
          position: relative;
          top: 2.5px;
          left: 0px;
          > select {
            width: 100px;
            padding: 0px 7px;
          }
        }
      }
      .change-path-button {
        font-size: 18px;
        padding: 1px 4px;
        line-height: 5px;
        border-radius: 0px 5px 5px 0px;
        cursor: pointer;
        > .icon-dots {
          position: relative;
          top: 10px;
        }
      }
    }
  }

  > .cptx-backing-up-bar {
    width: 100%;
    margin-top: 15px;
    .bar-background {
      width: 100%;
      height: 5px;
      border-radius: 4px;
      background-color: #d8d8d8;
      .bar-progress {
        height: 100%;
        border-radius: 4px;
        transition: width 2s linear;
        &.bar-in-progress {
          background-color: #0091ff;
        }
        &.bar-is-success {
          background-color: #68b515;
        }
      }
    }
    .bar-message {
      line-height: 14px;
      margin-top: 3px;
    }
  }
}

/*  THEME
----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_SELECT, $_COLOR_TEXT_MAIN_TITLE) {
  [data-theme^="#{$_THEME}"],
  [data-theme] [data-theme^="#{$_THEME}"] {
    #settings-account-backup {
      .ctpx-section-item-options {
        .ctpx-item-option {
          .item-option-content.ctpx-autobackup-path {
            color: $_COLOR_TEXT_MAIN_TITLE;
            border-color: $_BACKGROUND_COLOR_SELECT;
          }
          .change-path-button {
            background-color: $_BACKGROUND_COLOR_SELECT;
            border: 1px solid $_BACKGROUND_COLOR_SELECT;
          }
        }
      }
    }
  }
}

@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_SELECT_LIGHT, $_COLOR_TEXT_MAIN_TITLE_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_SELECT_DARK, $_COLOR_TEXT_MAIN_TITLE_DARK);
