@import '../definitions/variables';

$input-background: rgba($text, .1);

.transaction-details {
    z-index: 30;

    &__header {
        overflow: hidden;
        min-height: 1em;
        margin: 0;
    }

    &__close {
        display: block;
        float: right;
        width: 1.4em;
        height: 1.4em;
        font-size: 1.8em;
        line-height: 1em;
        color: lighten($text, 20);
    }


    &__field {
        position: relative;

        @include greater($size-m) {
            float: left;
            width: calc(50% - 0.5em);

            &:nth-child(5) {
                width: 100%;
            }
        }

        & + & {
            margin-top: 1.2em;

            @include greater($size-m) {
                margin-top: 0;
            }
        }

        @include greater($size-m) {
            &:nth-child(3),
            &:nth-child(4),
            &:nth-child(5) {
                margin-top: 1.2em;
            }
            &:nth-child(2n) {
                margin-left: 1em;
            }
        }

        &-label {
            display: block;
            font-size: 0.8em;
            margin-left: 0.8em;
            color: lighten($text, 25);
        }

        &-input,
        &-select-wrap {
            width: 100%;
            background: $input-background;
            padding: 0.6em;
            height: 2.6em;
        }

        &-select {
            width: 100%;
            background: transparent;
            padding: 0;
            height: 1.4em;
        }

        &-input-wrap {
            width: 100%;
            background: $input-background;
            padding: 0.6em;
            height: 2.6em;
        }

        &-input-wrap &-input {
            min-width: calc(100% - 1em);
            background: transparent;
            padding: 0;
            height: 1.4em;

            &--date {
                min-width: calc(50% - 1em);
                width: calc(50% - 1em);
                float: left;
            }

            &--time {
                min-width: calc(50% - 1em);
                width: calc(50% - 1em);
                float: right;
            }
        }
    }

    &__clearfix {
        clear: both;
    }

    &__autocomplete {
        z-index: 2;
        min-width: 40%;
        max-width: 60%;
        position: absolute;
        background: $background;
        margin-left: -1px;
        border: 1px solid $background-box;
        border-right-width: 2px;

        &-suggestion {
            padding: 0.6em;
            border-left: 1px solid transparent;

            &--selected {
                background: lighten($background-box, 4);
                border-left: 2px solid $primary-2;
            }
        }
    }


    &__units {
        display: flex;

        &-headline {
            display: block;
            margin-top: 2em;
            padding: 1em 0 0.4em;
            color: rgba($text, 0.6);
            font-size: 0.8em;
        }
    }

    &__unit {
        height: 5.5em;
        background: $input-background;
        vertical-align: middle;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;

        & + & {
            margin-left: 0.1em;
        }

        &--memo {
            height: 7.5em;
        }

        &--invalid {
            background: rgba(darken($red, 10), 0.6);
        }

        &--add {
            flex: 0 0 4em;

            &-animate {
                transition: flex 0.1s ease-out;
            }

            &:first-child {
                flex: 1 1 auto;
            }

            &:hover:not(:first-child) {
                flex: 0 0 5em;
            }
        }


        &-budget {
            width: 100%;
            padding: 1em;
        }

        &-amount {
            background: none;
            outline: none;
            width: 100%;
            text-align: center;
            font-size: 1.4em;
        }

        &-budget-select {
            display: inline;
            width: 90%;
            margin-left: 5%;
            background: transparent;

            text-align: center;
            text-align-last: center;
            color: lighten($text, 20);
        }

        &-memo {
            width: 100%;
            background: transparent;
            color: lighten($text, 20);
            font-size: 0.8em;
            text-align: center;
            margin-top: 1.2em;
        }

        &-add {
            width: 100%;
            height: 100%;
            line-height: 100%;
            color: rgba(lighten($text, 30), 0.4);
            font-size: 3em;
        }
    }

    &--hidden &__unit--invalid {
        background: $background;
    }

    &__quick-units {
        display: flex;
        margin-top: 2px;

        height: auto;
        max-height: 2em;
        overflow: hidden;
        transition: max-height 0.2s ease-out;

        &--hidden {
            max-height: 0;
        }
    }

    &__quick-unit {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;

        & + & {
            margin-left: 2px;
        }

        &-button {
            display: block;
            width: 100%;
            padding: 0.4em;
            font-size: 0.9em;
            background: rgba($input-background, 0.07);
        }

        &:nth-child(5) {
            display: none;
        }

        &:nth-child(3),
        &:nth-child(4) {
            display: none;

            @include greater($size-l) {
                display: block;
            }
        }

        @include greater($size-m) {
            &:nth-child(3) {
                display: block;
            }
        }
    }

    &__original {
        margin-top: 2em;

        &-toggle {
            padding: 1em 0 0.4em;
            color: rgba($text, 0.6);
            font-size: 0.8em;
        }

        &-content {
            position: relative;
            background: $input-background;
            padding: 1em;
        }

        &-datetime {
            display: block;
            font-size: 0.8em;
            margin-bottom: 0.6em;
            color: lighten($text, 20);
        }

        &-payee:empty:after,
        &-memo:empty:after {
            content: attr(data-fallback);
            opacity: 0.7;
        }

        &-memo {
            display: block;
            font-size: 0.8em;
            color: lighten($text, 25);
        }

        &-amount {
            position: absolute;
            display: block;
            top: 50%;
            margin-top: -1em;
            right: 1em;
            line-height: 2em;

            &--negative {
                color: $red;
            }
        }

        &-reconcile {
            padding: 0.8em;
            font-size: 0.8em;
            color: lighten($text, 35);
        }
    }
}