@include export-module('co-transaction-header-deliverydate-definitive-button-layout') {
  .co-transaction-header-deliverydate-definitive-button:not(.only-icon) {
    width: $tp-transaction-header-deliverydate-definitive-button-size;
    height: $tp-transaction-header-deliverydate-definitive-button-size;
    padding: $tp-transaction-header-deliverydate-definitive-button-padding;
    border-style: $tp-transaction-header-deliverydate-definitive-button-border-style;
    border-width: $tp-transaction-header-deliverydate-definitive-button-border-width;
    border-color: $tp-transaction-header-deliverydate-definitive-button-border-color;
    border-radius: $tp-transaction-header-deliverydate-definitive-button-border-radius;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5fc;
    co-icon {
      height: $tp-transaction-header-deliverydate-definitive-button-icon-size;
      width: $tp-transaction-header-deliverydate-definitive-button-icon-size;

    }
    &.closed {
      background: $tp-transaction-header-deliverydate-definitive-closed-button-background;
      border-color: $tp-transaction-header-deliverydate-definitive-closed-button-border-color;
      co-icon {
        svg { // for fontawesome icons
          fill: $tp-transaction-header-deliverydate-definitive-closed-button-fill;
        }
        & [fill] { // for own icons
          fill: $tp-transaction-header-deliverydate-definitive-closed-button-fill;
        }
      }
    }
    &.big {
      width: $tp-transaction-header-deliverydate-definitive-button-size-big;
      height: $tp-transaction-header-deliverydate-definitive-button-size-big;
      padding: $tp-transaction-header-deliverydate-definitive-button-big-padding;
      border-style: $tp-transaction-header-deliverydate-definitive-button-big-border-style;
      border-width: $tp-transaction-header-deliverydate-definitive-button-big-border-width;
      border-color: $tp-transaction-header-deliverydate-definitive-button-big-border-color;
    }
    &:not(.read-only) {
      cursor: pointer;
    }
  }
}
