@import "ng-devui/styles-var/devui-var.scss";
@import "src/app/@shared/styles/common.scss";

.da-content-card {
  padding: 24px 0;

  .da-user-settings {
    &-sidebar {
      height: 100%;
      border-right: 1px solid $devui-dividing-line;

      .da-user-settings-menu {
        li {
          padding: 12px 24px;
          margin-bottom: 8px;
          font-size: $devui-font-size-lg;
          color: $devui-text;
          cursor: pointer;
          position: relative;

          &::after {
            display: block;
            width: 4px;
            position: absolute;
            content: "";
            top: 0;
            right: -1px;
            bottom: 0;
            background-color: $devui-form-control-line-active;
            opacity: 0;
            transform: scaleY(0);
          }

          &:hover {
            color: $devui-brand-active;
          }

          &.da-item-active {
            background-color: $devui-list-item-active-bg;
            color: $devui-list-item-active-text;
            font-weight: bold;

            &::after {
              opacity: 1;
              transform: scaleY(1);
              transition: transform 0.2s ease-in-out;
            }
          }
        }
      }
    }

    &-content {
      padding-left: 40px;
      margin-bottom: 24px;

      .da-settings-header {
        font-size: $devui-font-size-page-title;
        font-weight: bold;
        padding-top: 12px;
        margin-bottom: 16px;
      }
    }
  }

}

.da-settings-item {
  border-bottom: 1px solid $devui-dividing-line;
  padding: 12px 4px 12px 0;
  margin-right: 36px;
  font-size: $devui-font-size-lg;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .da-settings-item-content {
    font-size: $devui-font-size;
    color: $devui-aide-text-stress;
    margin-top: 8px;
  }

  .da-settings-item-operation {
    color: $devui-link;
    font-size: $devui-font-size-lg;
    cursor: pointer;

    &:hover,
    &:active {
      color: $devui-link-active;
    }
  }
}
