@import "variables";

#attribute-visibility-config {
  min-width: 500px;
}

div.category-container {
  width: 100%;
  min-width: 400px;
  border-collapse: collapse;

  .category-header div {
    width: 30%;
  }
}

div.property-row {
  padding: 5px;
  display: flex;

  > div {
    min-width: 100px;
    height: 50px;
    position: relative;
    vertical-align: middle;
    width: 30%;
    display: flex;
    align-items: center;

    &:first-child {
      // 32px button + 5px margin
      width: calc(30% + 37px);
    }
  }
}

#attribute-visibility-config {
  height: 100%;

  #attribute-list {
    position: relative;
    height: 100%;

    .table-container {
      border-bottom: none;

      table [data-property="action"] {
        padding: 4px 0 4px 10px;

        .overflowable {
          padding: 2px;
        }
      }
    }
  }
}

#attribute-settings-popup_add {
  h2 {
    padding: 32px 0 20px 24px;
  }

  h3 {
    padding: 24px 0 16px 24px;
  }

  .category-list {
    width: 30%;
    display: flex;
    flex-direction: column;
    position: relative;

    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .attribute-list {
    width: 70%;
    display: flex;
    flex-direction: column;
    position: relative;
    border-left: 1px solid $neutral-600;

    .list-container {
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }

  .loading-indicator, .empty-indicator {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-bar {
    margin: 24px;
  }

  ul.list {
    list-style: none;
    margin: 0;
    padding: 10px 24px;
    overflow-x: hidden;
    overflow-y: auto;

    li {
      &:not(:last-child) {
        border-bottom: none;
      }

      &:hover {
        background-color: $neutral-200;
      }

      &.selected {
        background-color: rgba($table-accent, 50%);
        color: $blue-dark;
        font-weight: $font-weight-bold;
      }

      > label, > div {
        padding: 14px 16px;
        display: flex;
        align-items: center;
        cursor: pointer;
      }

      .counter {
        margin-left: auto;
      }
    }
  }
}

#attribute-settings-popup_edit {
  table {
    width: 100%;
    margin-bottom: 25px;

    tr {
      td {
        height: 32px;
        vertical-align: middle;
      }
    }
  }
}
