@import 'theme-mixin';

.themeMixin({
  :host {
    .header {
      background-color: @component-background;
    }

    .board {
      .row {
        &:not(:last-child) {
          border-bottom: 1px solid @table-grid-color;
        }
      }

      .bordered-left {
        border-left: 1px solid @table-grid-color;
      }

      .bordered-right {
        border-right: 1px solid @table-grid-color;
      }

      .option-row {
        &.selected {
          background-color: fade(@primary-color, 20%);
        }

        &:hover {
          background-color: @item-hover-bg;
        }
      }

      .call-row {
        .cell {
          border-right: 1px solid @table-grid-color;
        }
      }

      .put-row {
        .cell {
          border-left: 1px solid @table-grid-color;
        }
      }

      .highlighted {
        background-color: fade(@warning-color, 30%);
      }

      .current-price-line {
        background-color: @primary-color;
      }
    }
  }
});

:host {
  position: relative;
}

.settings {
  position: sticky;
  left: 0;

  .ant-form-vertical {
    .ant-form-item {
      flex-direction: column !important;
    }
  }

  .ant-form-item-control {
    max-width: 100px;
  }
}

.board {
  width: fit-content;
  min-height: 50px;
  min-width: 100%;

  .header {
    .ant-select {
      ::ng-deep {
        .ant-select-selector {
          padding: 0;

          .ant-select-selection-item {
            padding-right: 11px;
          }
        }

        .ant-select-arrow {
          font-size: 8px;
        }
      }
    }
  }

  .ant-collapse {
    ::ng-deep {
      .ant-collapse-header {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
      }

      .ant-collapse-content-box {
        padding: 0 !important;
      }
    }
  }

  .row, .option-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }

  .cell {
    padding: 1px 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    text-align: center;
  }

  .current-price-line {
    position: absolute;
    width: 100%;
    height: 1px;
    text-align: center;
    line-height: 0;

    @itm-font-size: 10px;

    .itm-call, .itm-put {
      display: inline-block;
      width: @itm-font-size;
      height: @itm-font-size;
      position: relative;

      line-height: 0;
      z-index: 1;

      font-size: @itm-font-size;
    }

    .itm-call {
      transform: translate(@itm-font-size, -@itm-font-size);
    }

    .itm-put {
      transform: translateX(-@itm-font-size);
    }
  }
}
