@import 'src/styles/abstracts/_variables.scss';

.TagForm {
  &__tagFormContainer {
    padding: 20px;
    border-bottom: 1px solid #f2f5fa;
    &__TextField {
      width: 100%;
      margin-top: $space-xxxs;
      margin-bottom: 20px;
    }

    &__colorContainer {
      margin-bottom: 20px;
      &__colorBox {
        margin-top: $space-xxxs;
        padding: 5px;
        border: $border-grey-lighter;
        border-radius: 6px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        &__colorButton {
          border-radius: $border-radius-circle;
          margin: 5px;
          width: 50px;
          height: 50px;
          min-width: auto;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          .MuiButton-label {
            width: 34px;
            height: 34px;
            border-radius: $border-radius-circle;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
          }
          &__content {
            width: 34px;
            height: 34px;
            border-radius: $border-radius-circle;
            opacity: 0.2;
          }
          &__circle {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 16px;
            height: 16px;
            border-radius: $border-radius-circle;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
    &__previewContainer {
      &__tagPreviewBox {
        margin-top: $space-xxxs;
        border: $border-grey-lighter;
        border-radius: 6px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 56px;
        position: relative;
        padding: 0 0.5rem;
      }
    }
  }
  &__tagFormFooterContainer {
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    &__cancelButton {
      margin-right: $space-sm;
    }
  }
}
