@import '~scss/variables';
@import '~scss/mixins';

.wrapper {
  display: flex;
  height: 100%;
}

.title {
  @include TypographySymbolText;
}

.tabs {
  width: 266px;
  margin-right: 22px;
  height: 100%;

  &Wrapper {
    height: calc(100% - 28px);
    margin-top: 8px;
    padding: 12px;
    padding-right: 0;
    border-radius: 2px;
    background-color: $bg-color;
    overflow: auto;
  }

  .tab {
    position: relative;
    padding: 12px;
    cursor: pointer;
    transition: all $trans-speed ease-in-out;
    margin-bottom: 8px;

    &:hover {
      background-color: $light-color01;
    }

    &.enabled {
      background-color: $white;
    }

    .indicator {
      position: absolute;
      top: 40px;
      left: 40px;
    }
  }
}

.content {
  flex: 1;
  height: 100%;

  &Wrapper {
    height: calc(100% - 38px);
    margin-top: 18px;
    padding: 12px;
    border-radius: 2px;
    background-color: $card-bg-color;
    overflow: auto;
  }
}

.checkItem {
  position: relative;
  padding: 8px 40px;
  margin-bottom: 8px;
  border-radius: 2px;
  border: solid 1px $border-color;
  background-color: $white;
  transition: all $trans-speed ease-in-out;

  :global {
    .checkbox {
      position: absolute;
      top: 8px;
      left: 12px;
    }
  }

  .extra {
    margin-top: 8px;
    margin-left: -28px;
    padding: 12px;
    background-color: $card-bg-color;

    & > span + span {
      margin-left: 4px;
    }
  }

  .tag {
    max-width: unset;
  }
}
