@import "../pages/mixins";

.export-controls {
  text-align: right; /* button right */

  /* dropdown trigger */
  & .export-button {
    /* button overrides */
    background-color: var(--black);
    padding: 0.75em 1.5em 0.625em 1.5em;
    margin-left: 1rem;
    /* prevent flexbox from wrapping icon under text */
    white-space: nowrap;
    /* transitions */
    transition:
      background-color 0.2s,
      opacity 0.2s;

      & .btn-icon {
        margin-left: 0.25em;
      }
  }

  /* dropdown list of options */
  & .export-list {
    /* positioning */
    position: absolute;
    top: auto;
    right: 0;
    z-index: 14;
    text-align: left; /* text left */
    /* sizing */
    min-width: min-content;
    margin-top: -20px;
    /* theming */
    background-color: var(--dark-2);
    border-radius: 2px;
    box-shadow: 0 1px 2em color(var(--black) a(0.333));
    /* transitions */
    will-change: opacity, transform, margin-top;
    opacity: 0;
    transform: scale(0.01);

    /* individual link */
    & .export-link {
      display: block;
      padding: 0.75em 1em;
      min-width: 10em;
      width: 100%;
      /* override default link styles */
      color: var(--white);
      text-decoration: none;
      /* transitions */
      transition:
        color 0.2s,
        background-color 0.2s;

      /* interactions */
      &:hover,
      &:focus {
        background-color: var(--accent-light);
      }

      /* disabled state */
      &.is-disabled {
        display: none;
      }
    }
  }

  /* open state */
  &.is-open .export-list {
    margin-top: 2px;
    opacity: 1;
    transform: none;
    /* transitions */
    transition:
      opacity 0.2s ease-out,
      margin-top 0.2s ease-out;
  }
}
