@import "../../../assets/scss/variables";

:root {

  --button-color: white;

}

:root[data-theme="dark"] {

  --button-color: #20262E;

}

.create-button {
  width: 100%;
  min-width: 175px;
  display: flex;
  gap: 0 15px;
  align-items: center;
  height: 44px;
  background-color: var(--button-color);

  svg {
    filter: $svg-default;
    height: 20px;
    width: 20px;
  }
  img {
    filter: $svg-default;
    height: 20px;
    width: 20px;
  }

  p {
    color: $title-color;
    font-size: 1.2rem;
    text-transform: uppercase;
  }

  padding: 12px 19px;
  cursor: pointer;
  justify-content: flex-start;
  border: 1px solid $main-color;
  outline: none;

  &:hover {
    background-color: #1a73e8;
    border: 1px solid #1a73e8;

    img {
      filter: brightness(0) invert(1);
    }

    svg {
      filter: brightness(0) invert(1);
    }

    p {
      color: $white;

    }
  }

  &:disabled {
    background-color: $inactive-color !important;
    color: $inactive-text !important;
    cursor: auto !important;
  }
}