@use "../../../../Sass/common/_variables";
@use "../../../../Sass/common/mixins";
@include mixins.empty-module("url-input");
@include mixins.empty-module("inner");

.tab-panels {
  width: fit-content;
  min-width: 50%;
  max-width: 600px;
  margin: 3vh auto;
  text-align: left;
  //padding-top: 10vh;
}
.tab-panel {
  text-align: left;
}

.label {
  composes: label from "../../../../Sass/common/_labels.scss";

  padding-left: 0;
  font-size: variables.$font-size-mid-small;
}

.tabHeading {
  font-weight: 500;
  border-bottom: 1px solid variables.$dark-lighter;
  margin-bottom: 3vh;
  display: inline-block;
}

// Add data from local form
//
// Markup:
// <form class='file-input'>
// <input type='file'/>
// <label class='btn btn--file-input'>Upload File</label>
// </form>
//
// Style guide: 3.3
//
.url-input {
  display: flex;
  flex-direction: row;

  &__text-box {
    composes: field from "../../../../Sass/common/_form.scss";
    font-family: variables.$font-base;
    height: auto;
  }

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

    width: unset;
    max-width: 150px;
    overflow-wrap: break-word;
  }
}

.dropdown {
  &__list {
    height: 250px;
    overflow-y: visible;
  }
  @media (max-height: 800px) {
    &__list {
      height: 200px;
    }
  }
  @media (max-height: 700px) {
    &__list {
      height: 150px;
    }
  }
  @media (max-height: 600px) {
    &__list {
      height: 100px;
    }
  }
}