MetaPhase-Consulting/State-TalentMAP

.hs-status-container {
  display: flex;
  justify-content: center;
  cursor: help;

  div {
    display: flex;
    min-width: 40px;
    font-size: 20px;
    color: $color-white;
  }

  .inactive {
    background-color: lightgrey;
  }

  .offered, .accepted {
    background-color: $color-green;
  }

  .revoked, .declined {
    background-color: $color-red;
  }

  .expired {
    background-color: $hs-expiration-orange;
    padding-left: 11px!important;
    padding-top: 2.5px
  }

  .hs-status-bureau {
    clip-path: polygon(0 0, 75% 0%, 100% 50%, 75% 100%, 0 100%);
    padding-bottom: 3px;
    padding-left: 3px;
  }

  .hs-status-bidder {
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);
    padding-bottom: 3px;
    padding-left: 13px;
  }
}

.tippy-popper {
  .tippy-tooltip.hs-status-theme {
    background-color: $color-white;
    color: $color-black;
    border: 2px solid $tm-gray;
    font-size: 14px;
    font-family: Roboto;
    padding: 15px;
    text-align: left;
    box-shadow: $tm-gray 3px 14px 29px;
    .arrow-regular {
      border: none;
    }
    .status-tooltip-wrapper {
      display: flex;
      padding-bottom: 10px;
      div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      div:first-child {
        padding-right: 10px;
        border-right: 1px solid $color-gray-light;
      }
      div:nth-child(2) {
        padding-left: 10px;
      }
      .title {
        font-size: 16px;
        font-weight: bold;
      }
      .status-name {
        font-weight: 400;
        font-style: italic;
      }
    }
    .hs-registered {
      border-top: 1px solid $color-gray-light;
      padding-top: 10px;
      .title {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}