@import './utils';

.#{$ns}-toast {
  @media (min-width: 481px) {
    max-width: 320px;
  }

  @media (max-width: 480px) {
    max-width: none;
    width: 100%;
  }
}

.#{$ns}-toast-message {
  @media (max-width: 768px) {
    // https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
    // Disable Auto Zoom in Input “Text” tag - Safari on iPhone
    font-size: 16px;
  }

  @media (min-width: 769px) {
    font-size: 14px;
  }

  .toast-message-title {
    @media (max-width: 768px) {
      margin-bottom: 3px;
    }

    @media (min-width: 769px) {
      margin-bottom: 5px;
    }

    font-weight: bold;
    line-height: 1em;
    margin-top: 1px;
  }
}
