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

#setting-labels{
  .section-block-table{
    display: flex;
    flex-direction: column;
    width: 100%;
    user-select: none;

    .table-header{
      display: flex;
      width: 100%;
      margin-bottom: 15px;

      h1{
        font-size: 14px;
        font-weight: bold;
        margin-top: 8px;
      }
    }

    .table-column-a{
      width: 20%;
    }

    .table-column-b{
      width: 25%;
      margin-left: 5%;
      text-align: center;
    }

    .table-column-c{
      width: 15%;
      margin-left: 5%;
      text-align: center;
    }

    .table-body{
      display: flex;
      flex-direction: column;
      width: 100%;
      flex-grow: 1;

      .table-row{
        display: flex;
        width: 100%;
        margin-bottom: 7px;

        &.table-system-label{
          .table-column-b{
            pointer-events: none;
          }
        }
        
        .table-column-a{
          color: #6c7280;
          font-size: 13px;
        }

        .checkmark {
          margin: 0 auto;

          &::after {
            position: relative;
            top: -1px;
            left: 3px;
          }
        }

        .table-column-c{
          font-size: 13px;
          font-weight: 700;
          color: #0091ff;
          cursor: pointer;
        }
      }
    }
  }
}

.custom-labels-add {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: initial;

  .custom-label-input {
    width: 27%;
  }

  .custom-label-button {
    margin-top: 15px;
    display: flex;
    cursor: pointer;

    span {
      font-size: 13px;
      font-weight: 700;
      text-align: left;
      color: #0091ff;
    }
  }
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_COLOR_TEXT_SETTINGS_TITLE){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    #setting-labels{
      .section-block-table{
        .table-header{
          h1{
            color: $_COLOR_TEXT_SETTINGS_TITLE;
          }
        }
      }
    }
  }
}

@include themable($_THEME_LIGHT, $_COLOR_TEXT_SETTINGS_TITLE_LIGHT);
@include themable($_THEME_DARK, $_COLOR_TEXT_SETTINGS_TITLE_DARK);