@import './../common/abstracts/_mixin';
@import './../common/abstracts/variable';

.wot-theme-dark {
  @include b(navbar-capsule) {
    &::before {
      border: 2rpx solid $-dark-border-color;
    }

    &::after {
      background: $-dark-border-color;
    }

    :deep(.wd-navbar-capsule__icon) {
      color: $-dark-color;
    }
  }
}

@include b(navbar-capsule) {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: $-navbar-capsule-width;
  height: $-navbar-capsule-height;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    content: '';
    border: 2rpx solid $-navbar-capsule-border-color;
    border-radius: calc($-navbar-capsule-border-radius * 2);
    transform: scale(0.5);
    transform-origin: 0 0;
  }

  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 1px;
    height: 36rpx;
    content: '';
    background: $-navbar-capsule-border-color;
    transform: translateY(-50%);
  }

  &:empty {
    display: none;
  }

  @include edeep(icon) {
    position: relative;
    flex: 1;
    font-size: $-navbar-capsule-icon-size;
    color: $-navbar-desc-font-color;
  }
}