cinny/src/app/organisms/space-manage/SpaceManage.scss

@use '../../partials/text';
@use '../../partials/dir';
@use '../../partials/flex';

.space-manage {
  & .pw__content-wrapper {
    position: relative;
  }
  & .pw__content-container {
    padding-top: 0;
    padding-bottom: 73px;
  }
}

.space-manage__content {
  margin-bottom: var(--sp-extra-loose);
  
  & > .text {
    margin-top: var(--sp-extra-tight);
    padding: var(--sp-extra-tight) var(--sp-normal);
    text-transform: uppercase;
  }

  &-items {
    @include dir.side(padding, var(--sp-extra-tight), 0);
    & > .text:first-child {
      padding: var(--sp-extra-tight);
    }
  }
  
  & > button {
    margin: var(--sp-normal);
  }

  &-loading {
    padding: var(--sp-loose);
    display: flex;
    justify-content: center;
    align-items: center;
    & .text {
      margin: 0 var(--sp-normal);
    }
  }
}
.space-manage-breadcrumb {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0 var(--sp-extra-tight);

  &__wrapper {
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: var(--bg-surface);
  }
  & > * {
    flex-shrink: 0;
  }

  & > .btn-surface {
    min-width: 0;
    padding: var(--sp-extra-tight) 10px;
    white-space: nowrap;
    box-shadow: none;
    & p {
      @extend .cp-txt__ellipsis;
      max-width: 200px;
    }
    &:last-child {
      box-shadow: var(--bs-surface-border) !important;
      background-color: var(--bg-surface);
    }
  }

}

.space-manage-item {
  margin: var(--sp-ultra-tight) var(--sp-extra-tight);
  padding: 0 var(--sp-extra-tight);
  border-radius: var(--bo-radius);

  & > div {
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  &--space {
    @extend .space-manage-item;
    & .space-manage-item__btn {
      cursor: pointer;
    }
  }

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

  & .checkbox {
    @include dir.side(margin, 0, var(--sp-tight));
  }
  
  
  &__btn {
    @extend .cp-fx__item-one;
    display: flex;
    align-items: center;

    & .avatar__border--active {
      box-shadow: none;
    }
    & > .text-b1 {
      @extend .cp-fx__item-one;
      @extend .cp-txt__ellipsis;
      min-width: 0;
      margin: 0 var(--sp-extra-tight);
    }
    & > .text-b2 {
      margin: 0 var(--sp-extra-tight);
      padding: 1px var(--sp-ultra-tight);
      color: var(--bg-positive);
      box-shadow: var(--bs-positive-border);
      border-radius: 4px;
    }
  }

  & .ic-btn {
    padding: 7px;
    @include dir.side(margin, 0, var(--sp-extra-tight));
    opacity: 0.7;
  }

  & .btn-surface,
  & .btn-primary {
    padding: var(--sp-ultra-tight) var(--sp-extra-tight);
    min-width: 60px;
  }

  & > .text {
    padding: 32px;
    padding-top: 0;
    padding-bottom: var(--sp-normal);
    white-space: pre-wrap;
  }
}

.space-manage__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: var(--sp-normal);
  background-color: var(--bg-surface);
  border-top: 1px solid var(--bg-surface-border);
  display: flex;
  align-items: center;

  & > .text {
    @extend .cp-fx__item-one;
    padding: 0 var(--sp-tight);
  }

  & > button {
    @include dir.side(margin, var(--sp-normal), 0);
  }
}