@import "../../styles/themes.scss";
@import "../../styles/typography.scss";

.monday-style-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: $border-radius-small $border-radius-small $border-radius-small 0;
  animation: label-pop 200ms;
  @include font-input();
  padding: 0 $spacing-small;
  transform-origin: bottom left;
  animation-timing-function: cubic-bezier(0, 0, 0.35, 1);
  position: relative;
  
  &__leg-wrapper {
    position: absolute;
    height: 8px;
    top: 100%;
    left: 0;
    display: inline-flex;
  }
  
  &--kind {
    &-fill {
      &.monday-style-label {
        &--color {
          &-primary {
            @include theme-prop(color, text-color-on-primary);
            @include theme-prop(background-color, primary-color);
            svg {
              path {
                @include theme-prop(fill, primary-color);
              }
            }
          }
          &-dark {
            @include theme-prop(color, text-color-on-inverted);
            @include theme-prop(background-color, inverted-color-background);
            svg {
              path {
                @include theme-prop(fill, inverted-color-background);
              }
            }
          }
          &-negative {
            @include theme-prop(color, text-color-on-primary);
            @include theme-prop(background-color, negative-color);
            svg {
              path {
                @include theme-prop(fill, negative-color);
              }
            }
          }
          &-positive {
            @include theme-prop(color, text-color-on-primary);
            @include theme-prop(background-color, positive-color);
            svg {
              path {
                @include theme-prop(fill, positive-color);
              }
            }
          }
        }
      }
    }

    &-line {
      border: 1px solid currentColor;
      .monday-style-label__leg-wrapper { 
        left: -1px;
        top: calc(100% + 1px);
      }
      &.monday-style-label {
        &--color {
          &-primary {
            @include theme-prop(color, primary-color);
            svg {
              path {
                @include theme-prop(fill, primary-color);
              }
            }
          }
          &-dark {
            @include theme-prop(color, inverted-color-background);
            svg {
              path {
                @include theme-prop(fill, inverted-color-background);
              }
            }
          }
          &-negative {
            @include theme-prop(color, negative-color);
            svg {
              path {
                @include theme-prop(fill, negative-color);
              }
            }
          }
          &-positive {
            @include theme-prop(color, positive-color);
            svg {
              path {
                @include theme-prop(fill, positive-color);
              }
            }
          }
        }
      }
    }
  }

  @keyframes label-pop {
    0% {
      transform: scale(0.8) rotate(25deg);
      opacity: 0;
    }
    
    70% {
      transform: rotate(-5deg);
      opacity: 1;
    }

    100% {
      transform: rotate(0deg);
    }
  }
}