@import url("/stylesheets/charts/wordcloud.css");
@import url("/stylesheets/socialmedia.css");
@import url("/stylesheets/cards.css");

.input-wrapper {
  position: relative;
  display: block;
  width: 100%;

  &::after {
    content: attr(data-message);
    position: absolute;
    bottom: 0.525rem;
    right: 0.4rem;
    color: #999;
    font-size: 11px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
  }

  &.show-message::after {
    opacity: 1;
  }
}

.big-input {
  width: 100%;
  height: 60px;
  max-height: 60px;
  padding: .25rem;
  background: #252525;
  border: .1rem solid;
  corner-shape: squircle;
  border-radius: calc(0.67rem * var(--br-mult));
  border-color: transparent;
  font-weight: 200;
  font-size: 17px;
  font-family: Inter, sans-serif;
  text-align: left;
  color: #ccc;
  resize: none;
  transition: border-color 250ms ease;

  &:hover {
    border-color: var(--md-primary-fg-color);
  }

  &:focus-visible {
    border-color: oklch(0.6323 0.2415 295.42);
    outline: none;
  }
}

.submit-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 2px;

  .label {
    font-size: 18px;
    font-variation-settings: 'wght' 500;
  }
  
  .button {
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 250ms ease;

    &:hover {
      opacity: 0.6;
    }

    &.disabled {
      cursor: none;
      pointer-events: none;
      opacity: 0;
    }
  }
}