@import '~scss/variables';
@import '~scss/mixins';

.wrapper {
  border-radius: $border-radius;
  background-color: #ffffff;
  box-shadow: $base-shadow;
  margin-bottom: 12px;

  & > div {
    &:last-of-type {
      border-radius: 0 0 4px 4px;
    }
  }
}

.titleWrapper {
  position: relative;
  padding: 24px 20px 28px 20px;
  overflow: hidden;

  .icon {
    @include vertical-center;
    left: 20px;
    padding: 6px;
    border-radius: 100px 0 100px 100px;
    background-color: $bg-color;
  }

  .title {
    padding-left: 72px;

    :global {
      .h3 {
        line-height: 32px;
      }
    }
  }
}

.more {
  margin-left: 12px;

  :global {
    .icon {
      margin-right: 4px;
      margin-top: -2px;
    }
  }

  & > a {
    @include TypographySymbolText(#3385b0);
  }
}

.tip {
  position: relative;
  padding: 12px 60px 12px 52px;
  background-color: #fff;
  border-top: 1px solid $light-color03;
  cursor: pointer;

  &:hover {
    background-color: $lightest;
  }

  &:last-of-type {
    border-radius: 0 0 4px 4px;
  }

  .tipIcon {
    position: absolute;
    top: 11px;
    left: 24px;
  }

  .operations {
    @include vertical-center;
    right: 20px;

    & > a + span,
    & > button + span {
      margin-left: 20px;
    }
  }

  .tipContent {
    & > div {
      @include TypographyTitleH6($dark-color07);
    }
    & > p {
      @include TypographyParagraph($dark-color01);
    }
  }
}

.tabsWrapper {
  padding: 6px 12px;
  background-color: $bg-color;
}
