@use '../../styles/abstracts/index' as *;

/* Molecule choose widget */

yap-choose-widget {
  display: flex;
  max-width: toRem(350);
  height: 2.25rem;
}

.m-choose-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  &__input {
    position: relative;
    display: flex;
    flex: 1;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 0 toRem(4) toRem(4) 0;
    border-left-width: 1px;
    border-left-style: solid;
    cursor: pointer;

    input {
      height: toRem(36);
      border: none;
      outline: none;
      width: 100%;
      padding-left: toRem(12);
      border-radius: 0 toRem(4) toRem(4) 0;
    }

    &__inline {
      display: contents;
      flex-grow: 0;
      overflow: hidden;
      width: inherit;
      min-width: toRem(400);
      border-radius: 0;

      input {
        width: 360px;
        border-radius: 0;
      }
    }
  }

  &__widget_overlay {
    width: inherit;
    height: inherit;

    &__content {
      position: relative;
      bottom: toRem(2);
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: toRem(4);
      width: toRem(263);
      padding: toRem(8);
      border-radius: toRem(5);

      &__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        overflow: hidden;
        width: toRem(58);
        height: toRem(58);
        border-radius: toRem(5);
        cursor: pointer;

        &:hover {
          border-width: toRem(1);
          border-style: solid;
        }

        &__label {
          overflow: hidden;
          width: toRem(51);
          margin: 0 toRem(2);
          font-size: toRem(11);
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &__selected {
          border-width: toRem(1);
          border-style: solid;
        }
      }
    }
  }

  &__buttons-widget {
    img {
      margin-right: toRem(3);
      filter: invert(100%);
    }
  }
}