@use "sass:math";
@import "../../../../style/mixin";

@include export-module('cc-transaction-quick-access-planning-layout') {
  .co-transaction-quick-access-planning {
    .row {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0.5em;
      gap: 0.5em;
    }

    .header {
      co-icon {
        height: 20px;
        width: 20px;
      }
      .co-dialog-header-title {
        margin: 0;
      }
    }
    display: flex;
    align-items: center;
    width: 100%;
    column-gap: $tp-transaction-quick-access-column-gap;
    .co-input-search {
      display: block;
      width: $tp-transaction-quick-access-search-width;
      height: $tp-transaction-quick-access-search-height;
    }

    .planning-buttons {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 1em;

      .planning-line-view-button {
        padding: 0.25em;
        co-icon {
          svg {
            path {
              fill: $tp-transaction-quick-access-planning-view-button-color;
            }
          }

        }

        &.selected {
          background-color: $tp-transaction-quick-access-planning-view-button-color-selected;
          co-icon {
            svg {
              path {
                fill: white;
              }
            }
          }
        }
      }
      .planning-button, .planning-lsp-button {
        padding: 0.25em;
        background-color: white;
        border: 1px solid $tp-transaction-quick-access-planning-lsp-mode-button;
        co-icon {
          fill: $tp-transaction-quick-access-planning-lsp-mode-button;
        }
        &.selected {
          background-color: $tp-transaction-quick-access-planning-lsp-mode-button;
          co-icon {
            fill: white;
          }
        }
      }
    }
  }
}