@import "theme-mixin";

.themeMixin({
  :host {
    .sell {
      color: @sell-color;
    }

    .buy {
      color: @buy-color;
    }

    .instrument-logo {
      .badge {
        z-index: @zindex-badge;
        min-width: @badge-height;
        height: @badge-height;
        padding: 0 6px;
        color: @badge-text-color;
        font-weight: @badge-font-weight;
        font-size: @badge-font-size;
        line-height: @badge-height;
        white-space: nowrap;
        text-align: center;
        background: @badge-color;
        border-radius: (@badge-height / 2);
        box-shadow: 0 0 0 1px @shadow-color-inverse;

        &.long {
          color: @layout-header-color;
          cursor: pointer;
          background: @buy-color;
        }

        &.short {
          color: @layout-header-color;
          cursor: pointer;
          background: @sell-color;
        }
      }
    }

    .description {
      .instrument {
        color: @heading-color;

        @media (max-width: @screen-xs-max) {
          & {
            flex-wrap: wrap;
            row-gap: 5px;

            .price {
              margin-top: 0;
              margin-left: 0;
            }
          }
        }
      }
    }
  }
});

.content {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
}

.instrument-logo {
  margin: 3px 10px 3px 0;
  position: relative;

  .badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    transform-origin: 100% 0;
  }
}

.description {
  display: flex;
  flex-direction: column;
  line-height: 0.7;
  margin: 0 0 10px 10px;

  .instrument {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    .identifier {
      display: inline-flex;
      padding: 3px 3px 3px 0;

      .exchange-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .exchange {
          font-size: .6rem;
          color: darkgray;
          margin-bottom: 0;
        }

        .instrument-group {
          font-size: .6rem;
          color: lightgray;
          margin-bottom: 0;
        }
      }

      .ticker {
        font-size: 2em;
        margin-right: 5px;
        margin-bottom: 0;
      }
    }
    .price {
      font-size: 2em;
      margin-left: 5px;
    }
  }
}

.dynamic {
  max-width: 300px;
}

.selectable {
  cursor: pointer;
  text-decoration: underline;
}

:host {
  ::ng-deep {
    .ant-descriptions-item-container span {
      line-height: 1;
    }
  }
}

.upper-row {
  margin-bottom: .5em;
}

.lower-row {
  margin-bottom: 0;
}
