@import "../../../style/mixin";

@include export-module('co-transaction-line-action-buttons-layout') {
  .co-transaction-line-action-buttons {
    .action-menu-button {
      height: $tp-transaction-line-action-buttons-action-menu-button-size;
      width: $tp-transaction-line-action-buttons-action-menu-button-size;
      cursor: pointer;
      border-radius: $tp-transaction-line-action-buttons-action-menu-button-border-radius;
      display: flex;
      align-items: center;
      justify-content: center;
      co-icon {
        height: $tp-transaction-line-action-buttons-action-menu-button-icon-size;
        width: $tp-transaction-line-action-buttons-action-menu-button-icon-size;
      }
    }
  }
  .co-transaction-line-action-buttons-popup {
    font-family: $tp-transaction-line-action-buttons-font-family;
    font-size: $tp-transaction-line-action-buttons-font-size;

    .transaction-line-action-buttons-wrapper {
      padding: $tp-transaction-line-action-buttons-padding;
      display: flex;
      align-items: center;
    }
    .transaction-line-action-buttons-popup-wrapper {
      display: flex;
      position: fixed;
      flex-direction: column;
      z-index: 2;
      animation: buttonsIn 0.5s forwards;
      overflow: hidden;
      max-height: 0;
      row-gap: $tp-transaction-line-action-buttons-row-gap;
      padding: $tp-transaction-line-action-buttons-padding;
      box-shadow: $tp-transaction-line-action-buttons-box-shadow;
      border-radius: $tp-transaction-line-action-buttons-border-radius;
      background-color: #212437;
      max-width: 180px;
    }

    .action-button-wrapper {
      cursor: pointer;
      padding: $tp-transaction-line-action-buttons-action-button-padding;
      border-radius: $tp-transaction-line-action-buttons-action-button-border-radius;
      display: flex;
      align-items: center;
      margin: $tp-transaction-line-action-buttons-action-button-margin;
      column-gap: $tp-transaction-line-action-buttons-action-button-column-gap;
      background: #2e3350;
      min-height: 40px;
      co-icon {
        height: $tp-transaction-line-action-buttons-action-button-icon-size;
        width: $tp-transaction-line-action-buttons-action-button-icon-size;
        svg {
          fill: #FFF;
        }
        svg [fill] {
          fill: #FFF;
        }
      }
      &:hover {
        svg {
          fill: $tp-color-font;
        }
        svg [fill] {
          fill: $tp-color-font;
        }
        .action-button-description {
          color: $tp-color-font;
        }
      }
    }
  }
  @keyframes buttonsIn {
    from {
      max-height: 0;
    }
    to {
      max-height: 500px; /* Change this to the desired height */
    }
  }
}