@import '~@od/global-resources/scss/settings/index';

.product-warning {
  position: relative;
  padding-top: 0;

  $warning-border-radius: 3px;

  .warning-block {
    display: table;
    margin-bottom: 12px;
    border-radius:  $warning-border-radius;
    border: 1px solid $gray-medium;
    border-collapse: separate;
    border-spacing: 0;
  }

  .icon-container,
  .description-container {
    display: table-cell;
    vertical-align: middle;
  }

  .icon-container {
    text-align: center;
    background-color: $gray-light;
    padding: 6px;
    border-top-left-radius: $warning-border-radius;
    border-bottom-left-radius: $warning-border-radius;

    svg {
      width: 25px;
      height: 25px;
    }

    .text {
      letter-spacing: 2px;
      margin-top: 3px;
    }
  }

  .description-container {
    padding: 12px;
    border-left: 1px solid $gray-medium;

    p + p {
      margin-top: 3px;
    }
  }

  .warning-tooltip {
    position: absolute;
    visibility: hidden;
    height: 0;
    opacity: 0;
    bottom: 0;
    transition: opacity .5s, bottom .5s  ;
    border: 2px solid $gray-medium;
    background-color: $white;
    border-radius: 3px;
    padding: 6px;
    font-size: 12px;
  }

  &:hover .warning-tooltip,
  &:focus .warning-tooltip {
    color: $gray;
    visibility: visible;
    height: auto;
    bottom: 103%; /* Needed to overwrite older browsers which don't support calc*/
    bottom: calc(100% + 12px);
    opacity: 1;

    &:after {
      content: "";
      width: 12px;
      height: 12px;
      border-style: solid;
      border-color: $gray-medium;
      border-width: 0 0 2px 2px;
      transform: rotate(-45deg);
      bottom: -8px;
      position: absolute;
      left: 35px;
      background-color: $white;
    }
  }
}