@import '@styles/mixin.scss';

:host {
  --capsule-bar-area-bg: var(--background-color-white);
  --capsule-bar-height: 66px; // 状态栏高度，组件会在初始化时尝试自动获取胶囊按钮高度并覆写该值
  --capsule-bar-top: 66px;
  --capsule-bar-left: 7px;
  --capsule-bar-right: 190rpx;
  --capsule-bar-icons-width: 87px;
  --capsule-bar-icons-height: 30px;
  --capsule-bar-icons-bg: var(--background-color-white);
  --capsule-bar-title-height: var(--capsule-bar-icons-height);
  --capsule-bar-title-padding: var(--padding-gap-sm);
  --capsule-bar-title-margin-left: 87px;
  --capsule-bar-title-font-size: var(--font-size-xxl);
  --capsule-bar-title-color: var(--text-color-base);
}

.capsule-bar-container {
  .capsule-bar-fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
  }

  .capsule-bar-placeholder {
    box-sizing: border-box;
    width: 100%;
    height: var(--capsule-bar-height);
  }
}

.capsule-bar-area {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: var(--capsule-bar-height);
  padding-top: var(--capsule-bar-top);
  padding-right: var(--capsule-bar-right);
  padding-left: var(--capsule-bar-left);
  overflow: hidden;

  .capsule-bar-row {
    display: flex;
    align-items: flex-start;
  }
}

.capsule-bar-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.capsule-bar-icon {
  position: relative;
  display: flex;
  align-items: center;
  width: var(--capsule-bar-icons-width);
  height: var(--capsule-bar-icons-height);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
  border: 1rpx solid rgba(151, 151, 151, 0.2);
  border-radius: 50rpx;

  &:empty {
    width: auto !important;
    border: none;
  }

  &--single {
    // background: transparent;
    background-color: var(--capsule-bar-icons-bg);
  }

  .icon {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .icon:nth-child(2) {
    position: relative;

    &::after {
      @include hairline();
      border-left-width: 1px;
    }
  }
}

.capsule-bar-content {
  flex: 1;
  align-items: center;

  .capsule-bar-title {
    height: var(--capsule-bar-title-height);
    padding: 4rpx var(--capsule-bar-title-padding) 0;
    margin-left: var(--capsule-bar-title-margin-left);
    font-size: var(--capsule-bar-title-font-size);
    line-height: var(--capsule-bar-title-height);
    color: var(--capsule-bar-title-color);
    @include multi-ellipsis(1);

    &--center {
      text-align: center;
    }

    &--left {
      text-align: left;
    }

    &--right {
      text-align: right;
    }
  }
}