@import "theme-mixin";
@import "buy-sell-button-mixin";

.themeMixin({
  :host ::ng-deep {
    .buy-btn {
      .buySellButton(@buy-color, @buy-sell-btn-text-color, @buy-color-disabled, @buy-color-background-disabled);
    }

    .sell-btn {
      .buySellButton(@sell-color, @buy-sell-btn-text-color, @sell-color-disabled, @sell-color-background-disabled);
    }

    .symbol-name {
      .badge {
        z-index: @zindex-badge;
        min-width: @badge-height-sm;
        height: @badge-height-sm;
        padding: 0 4px;
        color: @badge-text-color;
        font-weight: @badge-font-weight;
        font-size: @badge-font-size;
        line-height: @badge-height-sm;
        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;
          background: @buy-color;
        }

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

.compact {
  margin: 0;
}
.symbol-name {
  position: relative;
  display: inline-block;

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