@use "../../../Sass/common/_variables";
@use "../../../Sass/common/mixins";

// These remaining SCSS styles can be removed when we refactor Dropdown.jsx to use styled-components.

.dropdown {
  float: left;
  &__list {
    display: flex;
    flex-direction: column;
  }

  &__btn {
    composes: btn--small from "../../../Sass/common/_buttons.scss";
  }

  &__btn--option {
    width: 100%;
    float: left;
    color: variables.$color-primary;

    &:hover,
    &:focus {
      background: variables.$color-primary;
      color: orange;
      text-decoration: none;
    }
  }
}

.btn--dropdown {
  // largely to undo .btn--dropdown
  // It would be better to add a class to the Add Data dropdown instead.
  z-index: 999;
  color: white; // TODO
  font-family: variables.$font-pop;
  border: none;
  padding: 1px 8px;
  margin-right: 3px;
  width: auto;
}

.btn-small {
  composes: btn--small from "../../../Sass/common/_buttons.scss";
}

.btn-download {
  composes: btn from "../../../Sass/common/_buttons.scss";
  text-align: center;
  padding: 4px 3px;
  margin-left: 3px;
  vertical-align: top;

  svg {
    height: 20px;
    width: 20px;
  }

  &:hover,
  &:focus {
    text-decoration: none;
  }
}