@import (reference) url('./Dropdown.less');

.Suggestions {
  font-size: var(--fontSize-s);
  margin-bottom: calc(var(--Widget-padding) * -1);

  &-refresh {
    display: flex;
    margin-top: calc(var(--Widget-padding) * -1);
    padding: var(--gap-m) 0;

    > button {
      color: var(--color-black);
      text-align: left;
      width: 100%;

      &::before {
        .Icon;

        border-radius: 50%;
        content: 'refresh';
        float: right;
      }

      &:hover:not(.is-refreshing) {
        cursor: pointer;
        text-decoration: underline;
      }

      &.is-refreshing {
        opacity: 0.5;

        &::before {
          animation: spin var(--time-xl) infinite ease-in-out;
        }
      }
    }
  }

  &-list {
    border-top: 1px solid var(--color-gray3);

    > .Widget-title {
      background: var(--color-white);
      display: block;
      font-size: var(--fontSize-s);
      padding: var(--gap-m) 0;
      z-index: 0;

      .Widget-controls {
        margin: 0 calc(0px - var(--gap-m));
        z-index: 0;
      }
    }

    &-add {
      column-gap: var(--gap-s);
      display: flex;
      flex-wrap: wrap;
      margin: calc(0px - var(--Widget-padding))
        calc(0px - var(--Widget-padding)) 0 calc(0px - var(--Widget-padding));
      row-gap: var(--gap-s);

      li {
        column-gap: var(--gap-s);
        display: flex;
        flex-wrap: wrap;
        row-gap: var(--gap-s);

        .Suggestion-add {
          background-color: var(--color-gray2);
          color: var(--color-black);
          cursor: pointer;
          padding: 0 var(--gap-s);

          &.is-added {
            color: var(--color-gray5);
            pointer-events: none;
          }

          &:hover {
            background-color: var(--color-blue2);
          }
        }
      }
    }

    &-create {
      display: flex;
      flex-direction: column;
      margin: calc(0px - var(--Widget-padding))
        calc(0px - var(--Widget-padding)) 0 calc(0px - var(--Widget-padding));

      &-item {
        &:not(:first-child) {
          border-top: 1px solid var(--color-gray3);
        }

        &-keyword {
          .Suggestion-create {
            &:not(:first-child) {
              border-top: 1px solid var(--color-gray3);
            }

            font-size: var(--fontSize-m);
            padding: var(--gap-m) 0;

            a {
              color: var(--Link-color);
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .message-error {
    margin-bottom: var(--gap-l);
  }
}
