Currency.scss

//Styles for Currency component
.currency {
  flex: 1 1 96px;

  position: relative;

  display: flex;
  flex-direction: column;

  //Local variables
  --color-local-background: var(--color-surface);

  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-local-background);

  //Variants
  &-base {
    border-bottom: none;
    border-radius: 0 0 0 var(--size-border-radius);
  }

  &-mobile &__remove-btn {
    opacity: 1;
  }

  &-mobile {
    border-radius: 0px;
    border-bottom: 1px solid var(--color-border);
  }

  //States
  &:hover &__remove-btn {
    opacity: 1;
  }

  &:focus {
    outline: none;
    --color-local-background: var(--color-border);
  }

  //Top part
  &__top-part {
    display: flex;
    justify-content: space-between;

    padding: 8px 8px 0 8px;
  }

  //Remove btn
  &__remove-btn {
    opacity: 0;

    --size: 32px;

    width: var(--size);
    height: var(--size);

    border-radius: 8px;
    background-color: var(--color-local-background);
    background-image: url(./icons/minus.svg);
    background-repeat: no-repeat;
    background-position: center;

    //States
    &:focus {
      outline: none;
      background-color: var(--color-border);
    }
    &:focus-visible {
      outline: none;
      opacity: 1;
      background-color: var(--color-border);
    }
  }

  //Bottom part
  &__bottom-part {
    padding: 16px;

    flex-grow: 1;

    display: flex;
    align-items: flex-start;
  }

  //Input
  &__icon {
    margin-right: 10px;

    font-size: var(--size-text-input);
    color: var(--color-text-primary);
  }

  &__input {
    width: 100%;
    font-size: var(--size-text-input);

    color: var(--color-text-primary);
    background-color: var(--color-local-background);

    //States
    &:focus {
      outline: none;
    }
  }
}