/* @bourse-widget */
.bourse-widget {
  @include poly-padding--small;

  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 180px;

  transition: top .4s;
  
  @media screen and (min-width: 769px) {
    align-items: flex-end;
    position: fixed;
    top: 160px;
    left: 35px;
    z-index: 100;
      svg {
        path {
          fill: $white;
        }
      }

    &--white {
      background-color: #ffffff;

      svg {
        path {
          fill: $black;
        }
      }
    }
  }

  &__name {
    font-family: 'Biryani', sans-serif;
    font-size: 20px;
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.3;
    letter-spacing: normal;
    margin-right: $small-spacing;
    padding-left: 3px;
    color: $white;

    .bourse-widget--white & {
      color: $black;
    }

    @media screen and (max-width: 768px) {
      display: none;
    }
  }

  &__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;

    @media screen and (max-width: 768px) {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    &__arrow {
      width: 14px;
      transform: rotate(-90deg);
      display: inline-block;

      path {
        fill: #81cfe2;
      }

      .bourse-widget__price--down & {
        transform: rotate(90deg);

        path {
          fill: #eb0047;
        }
      }
    }

    &__change {
      font-size: 14px;
      font-weight: 300;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      color: $white;

      .bourse-widget--white & {
        color: $black;
      }
    }

    &__cost {
      font-family: 'Biryani', sans-serif;
      font-size: 20px;
      font-weight: 900;
      font-style: normal;
      font-stretch: normal;
      
      letter-spacing: normal;
      color: #81cfe2;

      @media screen and (max-width: 768px) {
        display: flex;
        align-items: center;
      }

      @media screen and (min-width: 769px) {
        line-height: 1.3;
      }

      .bourse-widget__price--down & {
        color: #eb0047;
      }
    }

    @media screen and (max-width: 320px) {
      span {
        font-size: 90%;
      }
    }
  }

  &__date {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: 0.8px;
    margin-left: -3px;
    color: $white;

    .bourse-widget--white & {
      color: $black;
    }

    @media screen and (max-width: 768px) {
      display: none;
    }

    &__time {
      // margin-right: $small-spacing;
      display: flex;
      align-items: center;
      margin-left: -3px;

      svg {
        display: inline-block;
        width: 2.2em;
        margin-right: 0.5em;
      }
    }

    &__date {
      margin-left: auto;
      display: flex;
      align-items: center;
    }
  }
}