@import '../../../styles/common.scss';

.container {
  display: grid;
  grid-template-rows: $page-header-height 1fr;
  grid-template-columns: max-content 1fr;
  grid-gap: 1px;
  justify-content: end;
  width: max-content;

  .actions {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 1px;
    transition: max-width 200ms linear, opacity 150ms linear;
    overflow: hidden;
  }

  .dropDownList {
    width: 100%;
    max-width: 360px;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 60px;
    grid-gap: 1px;

    border-top: 2px solid white;

    grid-column: 1 / span 2;
    place-self: end;

    background-color: white;

    z-index: 2;

    .dropDown {
      height: unset;
      width: unset;

      display: grid;
      grid-template-columns: 1fr 40px;
      grid-template-rows: 1fr;

      // icon
      div:first-child {
        display: grid;
        align-items: center;
        grid-row: 1 / span 1;
        justify-items: start;
        grid-column: 2 / span 1;
        padding: 0px;

        svg,
        img {
          height: 30px;
        }
      }

      // label
      div:last-child {
        display: grid;
        align-items: center;
        grid-column: 1 / span 1;
        justify-items: start;

        padding: 0px 0px 0px 20px;

        span {
          height: 30px;

          display: grid;
          align-items: center;
        }
      }
    }
  }
}
