// Made by Luting ^-^
// 设置左边栏(包含 Actions 的工作流栏)

%active-item-after-style {
  background: #1f6feb;
  border-radius: 0.375rem;
  content: '';
  height: 24px;
  left: calc(0.5rem * -1);
  position: absolute;
  top: calc(50% - 12px);
  width: 4px;
}

.ui.vertical.menu {
  background: var(--color-body);
  border: 0;

  .header.item {
    color: #9198a1 !important;
    font-size: 1.5rem;
    font-weight: 700;
    background: unset;
    margin-bottom: 0.5rem;
  }

  .menu .item:hover {
    background: var(--color-hover);
  }

  .item,
  .item > summary {
    font-size: 1.1rem;
    background: unset;
    padding: 6px 8px;
    color: var(--color-white) !important;
  }

  .item:before {
    background: unset;
  }

  .active.item,
  .active.item > summary {
    font-weight: 600;
  }

  .active.item:after {
    @extend %active-item-after-style;
  }

  details {
    &:has(.active.item) {
      > summary {
        font-weight: 600;
        background: #161a21;

        &:hover {
          background: var(--color-hover);
        }
      }

      .active.item {
        font-weight: 400;
      }

      &[open] {
        > summary {
          background: unset;

          &:hover {
            background: var(--color-hover);
          }
        }

        &:after {
          display: none;
        }
      }

      &:after {
        @extend %active-item-after-style;
      }
    }
  }
}

.ui.vertical.menu,
.ui.fluid.vertical.menu {
  .active.item {
    background: #161a21 !important;

    &:hover {
      background-color: var(--color-hover) !important;
    }
  }

  .item,
  .item > summary {
    border-radius: 0.5rem !important;
  }
}

// 设置右面版
.user-main-content,
.repo-setting-content,
.user-setting-content,
.org-setting-content,
.admin-setting-content {
  .ui.top.attached.header {
    border: 0;
    font-size: 1.5rem;
    font-weight: 400;
    background-color: unset !important;
    margin-bottom: 0.25rem;
  }

  .ui.attached.segment {
    background-color: unset;
    border-radius: 0.5rem !important;
  }

  .ui.attached.segment:not(.error) {
    border: 1px solid var(--color-light-border) !important;
  }

  .ui.attached.segment.error {
    border: 1px solid var(--color-error-border) !important;
  }

  input,
  textarea,
  .ui.input input,
  .ui.form input:not([type]),
  .ui.form select,
  .ui.form textarea,
  .ui.form input[type='date'],
  .ui.form input[type='datetime-local'],
  .ui.form input[type='email'],
  .ui.form input[type='file'],
  .ui.form input[type='number'],
  .ui.form input[type='password'],
  .ui.form input[type='search'],
  .ui.form input[type='tel'],
  .ui.form input[type='text'],
  .ui.form input[type='time'],
  .ui.form input[type='url'],
  .ui.selection.dropdown {
    background: var(--color-box-header);
  }

  .ui.form input:not([type]),
  .ui.form select,
  .ui.form textarea,
  .ui.form input[type='date'],
  .ui.form input[type='datetime-local'],
  .ui.form input[type='email'],
  .ui.form input[type='file'],
  .ui.form input[type='number'],
  .ui.form input[type='password'],
  .ui.form input[type='search'],
  .ui.form input[type='tel'],
  .ui.form input[type='text'],
  .ui.form input[type='time'],
  .ui.form input[type='url'] {
    padding: 7px 12px;
  }

  .ui.selection.dropdown {
    padding: 7px 24px 7px 12px;
  }
}
