@use 'mixins/amixin' as *;
@use '@angular/material' as mat;
.header-top {
  padding: 3px 0;
  background-color: var(--mat-sys-surface-container-low);
  color: var(--mat-sys-on-surface-variant);
  box-shadow: var(--mat-sys-level0);
}
.hotline {
  .item {
    @apply text-sm;
    .mat-icon,
    .custom-icon {
      @apply mr-1;
    }
  }
}
.inv-icon {
  &.style-v1 {
    display: inline-block;
    font-size: 14px;
    height: 32px;
    line-height: 34px;
    outline: medium none;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 32px;
    z-index: 1;
    color: var(--mat-sys-on-surface-variant);
    @include transition(all, 0.4s, ease);
    span.soc-name {
      opacity: 0;
      display: block;
      font-size: 12px;
      height: 32px;
      left: 14px;
      line-height: 31px;
      position: absolute;
      top: 0;
      z-index: 0;
      white-space: nowrap;
      font-style: italic;
      pointer-events: none;
      background: var(--mat-sys-primary);
      color: var(--mat-sys-on-primary);
      @include transition(all, 0.4s, ease);
      @include border-radius(5px, 5px, 5px, 5px);
      &:before,
      &:after {
        content: '';
        display: block;
        height: 32px;
        position: absolute;
        top: 0;
        width: 32px;
        z-index: -1;
        background: var(--mat-sys-primary);
        color: var(--mat-sys-on-primary);
        @include transition(all, 0.4s, ease);
        @include border-radius(3px, 3px, 3px, 3px);
      }
      &:before {
        left: -14px;
      }
      &:after {
        right: -12px;
        @include transition(all, 0.4s, ease);
      }
    }
    span.soc-icon-bg {
      @include border-radius(3px, 3px, 3px, 3px);
      display: block;
      content: '';
      width: 32px;
      height: 32px;
      line-height: 32px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      opacity: 0;
      background: rgba(0, 0, 0, 0.15);
      @include border-radius(3px, 3px, 3px, 3px);
      @include transition(all, 0.4s, ease);
    }
    .mat-icon {
      position: relative;
      z-index: 1;
      width: 14px;
      height: 14px;
      line-height: 1;
      color: var(--mat-sys-on-surface-variant);
    }
    &:hover {
      z-index: 10;
      color: var(--mat-sys-on-primary);

      span.soc-name {
        width: auto;
        padding-left: 28px;
        opacity: 1;
        white-space: nowrap;
        @include transition(all, 0.4s, ease);
      }
      span.soc-icon-bg {
        top: 0px;
        left: 0px;
        opacity: 1;
      }
      ::ng-deep {
        .mat-icon {
          color: var(--mat-sys-on-primary);
        }
      }
    }
    &:last-child {
      > span.soc-name {
        right: 11px;
        left: auto;
        &:before {
          display: none;
        }
      }
      &:hover > span.soc-name {
        padding-left: 12px;
        padding-right: 28px;
      }
    }
  }
}

.right {
  .link {
    ::ng-deep a {
      @apply text-xs;
      color: var(--mat-sys-on-surface-variant);
      &:hover {
        color: var(--mat-sys-primary);
      }
    }
  }
}
