@layer components {
    .btn {
        @apply overflow-hidden relative z-1 text-center inline-flex items-center px-[23px] py-[17px];

        &--green {
            @apply border border-green-500 bg-green-500 text-white;

            &::before {
                @apply absolute border border-transparent right-[-1px] left-[-1px] bottom-[-1px] transition-all duration-500 -z-1;
                content: '';
                background: #53af87;
                top: calc(100% + 1px);
            }

            &:hover {
                &::before {
                    top: -1px;
                }
            }

            &:active {
                &::before {
                     background: #5fb794;
                }
            }

            &.btn {
                &--disabled {
                    @apply text-white text-opacity-60 pointer-events-none;
                    background-color: #BEBEC2;
                }
            }
        }

        &--outline {
            @apply bg-white border border-blue-900 border-opacity-40 text-blue-900 justify-center overflow-visible;

            &::before {
                 @apply absolute bottom-[-1px] right-1/2 w-0 h-0 border-blue-900 border-r-0 border-t-0;
                 content:'';
                 transition: height 0.15s ease-out, width 0.15s ease-out 0.15s;
            }

            &::after {
                @apply absolute bottom-[-1px] left-1/2 w-0 h-0 border-blue-900 border-l-0 border-t-0;
                content:'';
                transition: height 0.15s ease-out, width 0.15s ease-out 0.15s;
            }

            > span {
                &::before {
                    @apply absolute top-[-1px] right-[-1px] opacity-0 w-0 h-0;
                    content: '';
                }

                &::after {
                    @apply absolute top-[-1px] left-[-1px] opacity-0 w-0 h-0;
                    content: '';
                }
            }

            &:hover {
                &::before {
                    @apply border-l-[1px] border-b-[1px];
                    width: calc(50% + 1px);
                    height: calc(100% + 2px);
                    transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
                }

                &::after {
                     @apply border-r-[1px] border-b-[1px];
                     width: calc(50% + 1px);
                     height: calc(100% + 2px);
                     transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
                }

                > span {
                    &::before {
                        @apply border-b border-blue-900 opacity-100 h-[1px];
                        width: calc(50% + 1px);
                        transition: opacity 0s ease-out 0.29s, width 0.15s ease-out 0.3s;
                    }

                    &::after {
                        @apply border-b border-blue-900 opacity-100 h-[1px];
                        width: calc(50% + 1px);
                        transition: opacity 0s ease-out 0.29s, width 0.15s ease-out 0.3s;
                    }
                }
            }

            &:active {
                @apply opacity-60;
            }

            &.btn {
                &--disabled {
                    @apply text-blue-900 opacity-40 pointer-events-none;
                }
            }
        }

        @screen md {
            /*@apply min-w-[244px];*/
        }

        @screen lg {
            /*@apply min-w-[304px] px-8 py-4;*/
        }
    }
}