@use '../variables.scss' as vars;

.flex-1 {
  flex: 1;
}

.button {
  &-search-mode {
    cursor: pointer;

    display: flex;
    align-items: center;

    width: 70px;
    padding-left: 8px;

    font: var(--default-text-font);
    color: var(--theme-hack-color, #42526f);

    background-color: var(--color-gray-fff);
    border: none;
    outline: none;

    app-cmf-icon {
      display: flex;
      margin-left: 3px;
    }

    .text-search-mode {
      color: var(--theme-hack-color, #42526f);
      white-space: nowrap;
    }
  }

  &-close {
    cursor: pointer;

    padding: 0 15px;

    font-size: var(--default-font-size);
    line-height: 27px;
    color: var(--theme-hack-color, #42526f);

    opacity: 1;
    background-color: #091e420b;
    border: none;
    border-width: 1px;
    border-radius: 5px;
    outline: none;

    &:hover {
      opacity: 0.9;
    }

    &-text {
      font: var(--default-text-font);
    }
  }

  &-search {
    margin: 0 5px;
    padding: 0 15px;
  }
}